Lego
function kustuta() {
let k = document.getElementById(“kanva”).getContext(“2d”);
k.clearRect(0, 0, 400, 300);
}
function kustuta2() {
let k = document.getElementById(“kanva2”).getContext(“2d”);
k.clearRect(0, 0, 500, 400);
}
function joon() {
let k = document.getElementById(“kanva”).getContext(“2d”);
k.beginPath();
k.lineWidth = “5”;
k.strokeStyle = “red”;
k.moveTo(50, 100); //alguspunkt
k.lineTo(100, 50) //keskpunkt
k.lineTo(150, 100);
k.lineTo(50, 100); //lõppu=keskpunkt
k.stroke(); // joon
k.fillStyle = “green”;
k.fill();
}
function ristkylik() {
let k = document.getElementById(“kanva”).getContext(“2d”);
let l = document.getElementById(“laius”).value;
let kor = document.getElementById(“korgus”).value;
//ristkülik
k.fillStyle = “lightblue”;
k.fillRect(50, 50, l, kor); // x, y, laius, kõrgus
}
function ring() {
let k = document.getElementById(“kanva”).getContext(“2d”);
k.beginPath();
k.arc(100, 75, 50, 0, 2 * Math.PI); //x,y -alguspunkt, R
k.stroke();
k.fillStyle = “red”;
k.fill();
}
function drawLeftLeg() {
let k = document.getElementById(“kanva2”).getContext(“2d”);
k.fillStyle = “black”;
k.fillRect(200, 254, 40, 110);
}
function drawRightLeg() {
let k = document.getElementById(“kanva2”).getContext(“2d”);
k.fillStyle = “black”;
k.fillRect(270, 254, 40, 110);
}
function drawBelt() {
let k = document.getElementById(“kanva2”).getContext(“2d”);
k.fillStyle = “black”;
k.fillRect(182, 237, 138, 18);
}
function drawBody() {
let k = document.getElementById(“kanva2”).getContext(“2d”);
//line 1
k.beginPath();
k.fillStyle = “green”;
k.moveTo(197, 139);
k.lineTo(176, 237);
//line 2
k.lineTo(325, 236);
//line 3
k.lineTo(303, 138);
//line 4
k.lineTo(303, 138);
k.fill();
k.beginPath();
k.moveTo(183, 233);
k.lineTo(319, 232);
k.stroke();
}
function drawFace() {
let k = document.getElementById(“kanva2”).getContext(“2d”);
k.beginPath();
k.moveTo(231, 110);
k.lineTo(234, 112);
k.lineTo(237, 113);
k.lineTo(243, 113);
k.lineTo(250, 113);
k.lineTo(255, 112);
k.lineTo(260, 110);
k.stroke();
k.beginPath();
k.fillStyle = “white”;
k.moveTo(288, 86);
k.lineTo(277, 88);
k.lineTo(274, 88);
k.lineTo(274, 94);
k.lineTo(272, 98);
k.lineTo(269, 100);
k.lineTo(264, 101);
k.lineTo(260, 101);
k.lineTo(255, 100);
k.lineTo(251, 97);
k.lineTo(250, 91);
k.lineTo(250, 90);
k.lineTo(245, 90);
k.lineTo(243, 90);
k.lineTo(242, 96);
k.lineTo(240, 99);
k.lineTo(237, 101);
k.lineTo(233, 101);
k.lineTo(227, 101);
k.lineTo(223, 100);
k.lineTo(220, 97);
k.lineTo(219, 91.);
k.lineTo(219, 89.);
k.lineTo(210, 87.);
k.lineTo(219, 89.);
k.lineTo(220, 87.);
k.lineTo(223, 86.);
k.lineTo(226, 86.);
k.lineTo(231, 86.);
k.lineTo(235, 86.);
k.lineTo(237, 86.);
k.lineTo(240, 87);
k.lineTo(242, 87);
k.lineTo(243, 90);
k.lineTo(245, 90);
k.lineTo(250, 90);
k.lineTo(250, 88);
k.lineTo(252, 87);
k.lineTo(255, 86);
k.lineTo(262, 86);
k.lineTo(267, 86);
k.lineTo(272, 86);
k.lineTo(274, 88);
k.lineTo(277, 88);
k.lineTo(279, 88);
k.lineTo(288, 86);
k.closePath();
k.fill();
k.stroke();
k.beginPath();
k.fillStyle = “white”;
k.arc(230, 91, 2, 0, 6, false);
k.closePath();
k.fill();
k.beginPath();
k.arc(262, 90, 2, 0, 6, false);
k.closePath();
k.fill();
}
function drawEyes() {
let k = document.getElementById(“kanva2”).getContext(“2d”);
k.beginPath();
k.fillStyle = “black”;
k.arc(231, 92, 4, 0, 6, false);
k.closePath();
k.fill();
k.beginPath();
k.arc(262, 92, 5, 0, 6, false);
k.closePath();
k.fill();
}
function drawNeck() {
let k = document.getElementById(“kanva2”).getContext(“2d”);
k.fillStyle = “yellow”;
k.fillRect(220, 126, 61, 13);
}
function drawleftarm() {
let k = document.getElementById(“kanva2”).getContext(“2d”);
k.beginPath();
k.fillStyle = “yellow”;
k.moveTo(171, 225);
k.lineTo(168, 233);
k.lineTo(168, 237);
k.lineTo(168, 240);
k.lineTo(173, 244);
k.lineTo(175, 251);
k.lineTo(173, 259);
k.lineTo(170, 263);
k.lineTo(165, 266);
k.lineTo(161, 266);
k.lineTo(161, 257);
k.lineTo(164, 254);
k.lineTo(164, 248);
k.lineTo(161, 243);
k.lineTo(157, 240);
k.lineTo(150, 240);
k.lineTo(143, 240);
k.lineTo(138, 241);
k.lineTo(135, 246);
k.lineTo(135, 251);
k.lineTo(135, 256);
k.lineTo(133, 262);
k.lineTo(130, 263);
k.lineTo(126, 257);
k.lineTo(126, 248);
k.lineTo(128, 242);
k.lineTo(134, 235);
k.lineTo(144, 232);
k.lineTo(145, 223);
k.lineTo(148, 221);
k.lineTo(154, 221);
k.lineTo(166, 223);
k.lineTo(171, 225);
k.closePath();
k.fill();
k.stroke();
k.beginPath();
k.fillStyle = “green”
k.moveTo(173, 227);
k.bezierCurveTo(173, 227, 169, 224, 169, 224);
k.bezierCurveTo(168, 223, 158, 221, 158, 221);
k.lineTo(145, 221);
k.lineTo(144, 223);
k.lineTo(142, 223);
k.lineTo(140, 222);
k.lineTo(142, 213);
k.lineTo(144, 199);
k.lineTo(146, 190);
k.lineTo(148, 184);
k.lineTo(155, 172);
k.lineTo(165, 158);
k.lineTo(171, 150);
k.lineTo(175, 145);
k.lineTo(178, 143);
k.lineTo(184, 142);
k.lineTo(190, 142);
k.lineTo(192, 142);
k.lineTo(193, 143);
k.lineTo(185, 182);
k.lineTo(183, 184);
k.lineTo(181, 191);
k.lineTo(180, 198);
k.lineTo(177, 214);
k.lineTo(175, 227);
k.lineTo(173, 227);
k.closePath();
k.fill();
k.stroke();
}
function drawrightarm() {
let k = document.getElementById(“kanva2”).getContext(“2d”);
k.beginPath();
k.fillStyle = “yellow”;
k.moveTo(333, 224);
k.lineTo(335, 232);
k.lineTo(336, 235);
k.lineTo(338, 239);
k.lineTo(333, 244);
k.lineTo(331, 250);
k.lineTo(333, 259);
k.lineTo(337, 262);
k.lineTo(341, 266);
k.lineTo(346, 266);
k.lineTo(347, 259);
k.lineTo(345, 254);
k.lineTo(342, 248);
k.lineTo(345, 242);
k.lineTo(349, 239);
k.lineTo(356, 239);
k.lineTo(363, 239);
k.lineTo(369, 240);
k.lineTo(372, 245);
k.lineTo(372, 250);
k.lineTo(372, 256);
k.lineTo(373, 262);
k.lineTo(377, 262);
k.lineTo(381, 256);
k.lineTo(381, 247);
k.lineTo(379, 241);
k.lineTo(372, 234);
k.lineTo(362, 231);
k.lineTo(360, 224);
k.lineTo(359, 219);
k.lineTo(352, 219);
k.lineTo(340, 221);
k.lineTo(333, 224);
k.closePath();
k.stroke();
k.fill();
k.beginPath();
k.fillStyle = “green”
k.moveTo(329, 225);
k.bezierCurveTo(329, 225, 332, 221, 333, 221);
k.bezierCurveTo(333, 221, 345, 218, 345, 218);
k.lineTo(358, 218);
k.lineTo(360, 221);
k.lineTo(363, 221);
k.lineTo(364, 219);
k.lineTo(362, 211);
k.lineTo(360, 198);
k.lineTo(357, 188);
k.lineTo(355, 182);
k.lineTo(347, 171);
k.lineTo(336, 156);
k.lineTo(330, 149);
k.lineTo(326, 144);
k.lineTo(322, 143);
k.lineTo(316, 141);
k.lineTo(309, 141);
k.lineTo(307, 141);
k.lineTo(306, 142);
k.lineTo(315, 181);
k.lineTo(317, 182);
k.lineTo(319, 190);
k.lineTo(321, 196);
k.lineTo(324, 212);
k.lineTo(327, 222);
k.lineTo(329, 225);
k.closePath();
k.stroke();
k.fill();
}
function drawHair() {
let k = document.getElementById(“kanva2”).getContext(“2d”);
k.beginPath();
k.fillStyle = “Black”;
k.moveTo(288, 73);
k.lineTo(288, 79);
k.lineTo(290, 89);
k.lineTo(293, 94);
k.lineTo(297, 98);
k.lineTo(300, 98);
k.lineTo(300, 100);
k.lineTo(302, 99);
k.lineTo(304, 96);
k.lineTo(308, 91);
k.lineTo(309, 87);
k.lineTo(309, 76);
k.lineTo(307, 68);
k.lineTo(302, 57);
k.lineTo(296, 49);
k.lineTo(291, 45);
k.lineTo(285, 39);
k.lineTo(278, 36);
k.lineTo(264, 34);
k.lineTo(252, 33);
k.lineTo(241, 33);
k.lineTo(233, 35);
k.lineTo(221, 37);
k.lineTo(214, 41);
k.lineTo(206, 46);
k.lineTo(201, 51);
k.lineTo(198, 57);
k.lineTo(196, 61);
k.lineTo(194, 67);
k.lineTo(192, 71);
k.lineTo(191, 74);
k.lineTo(191, 79);
k.lineTo(192, 82);
k.lineTo(193, 85);
k.lineTo(193, 89);
k.lineTo(195, 92);
k.lineTo(196, 97);
k.lineTo(198, 101);
k.lineTo(200, 102);
k.lineTo(201, 98);
k.lineTo(204, 98);
k.lineTo(207, 96);
k.lineTo(209, 89);
k.lineTo(210, 81);
k.lineTo(217, 82)
k.lineTo(234, 82);
k.lineTo(248, 81);
k.lineTo(259, 79);
k.lineTo(275, 75);
k.lineTo(285, 72);
k.lineTo(288, 73);
k.closePath();
k.fill();
k.stroke();
}
function drawBow() {
let j = document.getElementById(“kanva2”).getContext(“2d”);
j.beginPath();
j.lineWidth=”4″;
j.strokeStyle=”red”;
j.moveTo(240, 75);
j.lineTo(250,60);
j.closePath();
j.fill();
j.stroke();
}
function drawHead() {
let k = document.getElementById(“kanva2”).getContext(“2d”);
k.beginPath();
k.fillStyle = “yellow”;
k.arc(250, 88, 50, 0, 2 * Math.PI, true);//x,y, keskpunkt, radius
k.fill();
}
function drawall() {
drawBody();
drawHead();
drawFace();
drawEyes();
drawBelt();
drawleftarm();
drawrightarm();
drawLeftLeg();
drawRightLeg();
drawNeck();
drawHair();
drawBow();
}