{"id":60,"date":"2024-04-26T07:43:19","date_gmt":"2024-04-26T05:43:19","guid":{"rendered":"https:\/\/maratsaukans23.thkit.ee\/vp\/?page_id=60"},"modified":"2024-04-26T07:50:54","modified_gmt":"2024-04-26T05:50:54","slug":"js-lill-joonistamine","status":"publish","type":"page","link":"https:\/\/maratsaukans23.thkit.ee\/vp\/js-lill-joonistamine\/","title":{"rendered":"JS: Lill joonistamine"},"content":{"rendered":"\n<p><\/p>\n\n\n\n\n<canvas id=\"tahvel\"><\/canvas>\n<br>\n<input type=\"button\" value=\"joon\" onclick=\"joon()\">\n<input type=\"button\" value=\"ring\" onclick=\"ring()\">\n<input type=\"button\" value=\"ristk\u00fclik\" onclick=\"ristkyylik()\">\n<input type=\"button\" value=\"kustuta\" onclick=\"kustuta()\">\n<br>\n<br>\n<input type=\"button\" value=\"varre\" onclick=\"varre()\">\n<input type=\"button\" value=\"kroonleht1\" onclick=\"kroonleht1()\">\n<input type=\"button\" value=\"kroonleht2\" onclick=\"kroonleht2()\">\n<input type=\"button\" value=\"kroonleht3\" onclick=\"kroonleht3()\">\n<input type=\"button\" value=\"kroonleht4\" onclick=\"kroonleht4()\">\n<input type=\"button\" value=\"leht\" onclick=\"leht()\">\n<input type=\"button\" value=\"keskel\" onclick=\"keskel()\">\n<input type=\"button\" value=\"k\u00f5ik\" onclick=\"vse()\">\n\n\n\n<style>\n#tahvel{\n    background-color:lightgreen;\n    width: 50%;\n    height: 30%;\n}\n\ninput[type=button]{\n    background-color: purple;\n    color: black;\n    padding: 10px 32px;\n    border: 0;\n}\ninput[type=button]:hover{\n    background-color: white;\n    color: black;\n\n}\n<\/style>\n\n\n\n<script>\nfunction kustuta(){\n    let t=document.getElementById(\"tahvel\").getContext(\"2d\");\n    t.clearRect(0, 0, 300, 200);\n}\nfunction joon(){\n    let t=document.getElementById(\"tahvel\").getContext(\"2d\");\n    t.beginPath(); \/\/\u0630\u00bd\u0630\u00b0\u0631\u2021\u0630\u00b0\u0631\u201a\u0631\u0152 \u0631\u201a\u0631\u20ac\u0630\u00b0\u0630\u00b5\u0630\u061b\u0631\u201a\u0630\u00be\u0631\u20ac\u0630\u00b8\u0631\u0698\n    t.lineWidth=\"5\"; \/\/joone laius\n    t.strokeStyle=\"red\"; \/\/ joone v\u0623\u00a4rv\n\n    t.moveTo(50, 50);\n    t.lineTo(150, 50);\n    t.lineTo(150, 60);\n    t.lineTo(150, 100);\n    t.lineTo(50, 50);\n    t.stroke();\n    t.fillStyle=\"blue\"\n    t.fill();\n}\nfunction ring(){\n    \/\/ ringjoon\n    let t=document.getElementById(\"tahvel\").getContext(\"2d\");\n    t.beginPath();\n    t.strokeStyle=\"white\";\n    t.arc(100, 45, 20, 0, 2*Math.PI, true);\n    t.stroke();\n\n    t.beginPath();\n    t.fillStyle=\"white\";\n    t.arc(200, 45, 20, 0, 2*Math.PI, true);\n    t.fill();\n\n    t.beginPath();\n    t.strokeStyle=\"white\";\n    t.fillStyle=\"green\"\n    t.arc(250, 45, 20, 0, 2*Math.PI, true);\n    t.stroke();\n    t.fill();\n}\nfunction ristkyylik(){\n    let t=document.getElementById(\"tahvel\").getContext(\"2d\");\n    t.fillRect(20, 20, 30, 20);\n    t.fillStyle=\"black\";\n    t.fillText(\"Tere hommikust\", 100, 50);\n}\nfunction varre(){\n    let t=document.getElementById(\"tahvel\").getContext(\"2d\");\n    t.beginPath(); \/\/\u0630\u00bd\u0630\u00b0\u0631\u2021\u0630\u00b0\u0631\u201a\u0631\u0152 \u0631\u201a\u0631\u20ac\u0630\u00b0\u0630\u00b5\u0630\u061b\u0631\u201a\u0630\u00be\u0631\u20ac\u0630\u00b8\u0631\u0698\n    t.lineWidth=\"5\"; \/\/joone laius\n    t.strokeStyle=\"green\";\n    t.lineTo(100, 80);\n    t.lineTo(150, 300);\n    t.stroke();\n}\nfunction kroonleht1(){\n    let t=document.getElementById(\"tahvel\").getContext(\"2d\");\n    t.beginPath();\n    t.strokeStyle=\"white\";\n    t.fillStyle=\"pink\"\n    t.arc(85, 100, 14, 0, 2*Math.PI, true);\n    t.stroke();\n    t.fill();\n}\nfunction kroonleht2(){\n    let t=document.getElementById(\"tahvel\").getContext(\"2d\");\n    t.beginPath();\n    t.strokeStyle=\"white\";\n    t.fillStyle=\"pink\"\n    t.arc(90, 70, 14, 0, 2*Math.PI, true);\n    t.stroke();\n    t.fill();\n}\nfunction kroonleht3(){\n    let t=document.getElementById(\"tahvel\").getContext(\"2d\");\n    t.beginPath();\n    t.strokeStyle=\"white\";\n    t.fillStyle=\"pink\"\n    t.arc(120, 70, 14, 0, 2*Math.PI, true);\n    t.stroke();\n    t.fill();\n}\nfunction kroonleht4(){\n    let t=document.getElementById(\"tahvel\").getContext(\"2d\");\n    t.beginPath();\n    t.strokeStyle=\"white\";\n    t.fillStyle=\"pink\"\n    t.arc(120, 100, 14, 0, 2*Math.PI, true);\n    t.stroke();\n    t.fill();\n}\nfunction leht(){\n    let t=document.getElementById(\"tahvel\").getContext(\"2d\");\n    t.beginPath(); \/\/\u0630\u00bd\u0630\u00b0\u0631\u2021\u0630\u00b0\u0631\u201a\u0631\u0152 \u0631\u201a\u0631\u20ac\u0630\u00b0\u0630\u00b5\u0630\u061b\u0631\u201a\u0630\u00be\u0631\u20ac\u0630\u00b8\u0631\u0698\n    t.lineWidth=\"5\"; \/\/joone laius\n    t.strokeStyle=\"green\";\n    t.lineTo(120, 150);\n    t.lineTo(150, 100);\n    t.stroke();\n\n}\nfunction keskel(){\n    let t=document.getElementById(\"tahvel\").getContext(\"2d\");\n    t.beginPath();\n    t.strokeStyle=\"white\";\n    t.fillStyle=\"white\"\n    t.arc(105, 85, 10, 0, 2*Math.PI, true);\n    t.stroke();\n    t.fill();\n}\nfunction vse(){\n    varre();\n    kroonleht1();\n    kroonleht2();\n    kroonleht3();\n    kroonleht4();\n    leht();\n    keskel()\n\n\n}\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-60","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/maratsaukans23.thkit.ee\/vp\/wp-json\/wp\/v2\/pages\/60","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maratsaukans23.thkit.ee\/vp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/maratsaukans23.thkit.ee\/vp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/maratsaukans23.thkit.ee\/vp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maratsaukans23.thkit.ee\/vp\/wp-json\/wp\/v2\/comments?post=60"}],"version-history":[{"count":9,"href":"https:\/\/maratsaukans23.thkit.ee\/vp\/wp-json\/wp\/v2\/pages\/60\/revisions"}],"predecessor-version":[{"id":70,"href":"https:\/\/maratsaukans23.thkit.ee\/vp\/wp-json\/wp\/v2\/pages\/60\/revisions\/70"}],"wp:attachment":[{"href":"https:\/\/maratsaukans23.thkit.ee\/vp\/wp-json\/wp\/v2\/media?parent=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}