8.märtsi kaardi loonistamine

function kustuta(){ let t=document.getElementById(«tahvel»).getContext(«2d»); t.clearRect(0, 0, 300, 200); } function joon(){ let t=document.getElementById(«tahvel»).getContext(«2d»); t.beginPath(); //начать траекторию t.lineWidth=»2″; // joone laius t.strokeStyle=»black»; // joone värv t.moveTo(50, 50); //alguspunkt t.lineTo(100, 50); //veel 1 punkt t.lineTo(150, 60); t.lineTo(150, 150); //lõppunkt t.lineTo(50, 50); t.stroke(); // joonista! t.fillStyle=»blue»; t.fill(); //värvi } function ring(){ // ringjoon let t=document.getElementById(«tahvel»).getContext(«2d»); //arc — дуга t.beginPath(); t.arc(50, 60, 30, 0, 2*Math.PI, true ); //(x, y, R) t.stroke(); //ring t.beginPath(); t.arc(100, 45, 20, 0, 2*Math.PI, true ); //(x, y, R) t.stroke(); //ring joonega t.beginPath(); t.strokeStyle=»black»; t.lineWidth=»3″; t.fillStyle=»red»; t.arc(150, 45, 20, 0, 2*Math.PI, true ); //(x, y, R) t.stroke(); t.fill(); } function ristkyylik(){ let t=document.getElementById(«tahvel»).getContext(«2d»); t.filStyle=»black»; t.clearRect(20, 20, 30, 20); //x, y, laius, kõrgus t.fillText(«TERE HOMMIKUST!!!», 100, 50); } function valgusfoor(){ let f=document.getElementById(«tahvel»).getContext(«2d»); f.beginPath(); //начать траекторию f.lineWidth=»2″; // joone laius f.strokeStyle=»black»; // joone värv f.moveTo(100, 150); //alguspunkt f.lineTo(100, 200); //veel 1 punkt f.lineTo(100, 50); f.lineTo(50, 50); //lõppunkt f.lineTo(50, 200); f.stroke(); // joonista! f.fillStyle=»gray»; f.fill(); //värvi f.beginPath(); f.strokeStyle=»black»; f.lineWidth=»3″; f.fillStyle=»black»; f.arc(75, 70, 15, 0, 2*Math.PI, true ); //(x, y, R) f.stroke(); f.fill(); f.beginPath(); f.strokeStyle=»black»; f.lineWidth=»3″; f.fillStyle=»black»; f.arc(75, 140, 15, 0, 2*Math.PI, true ); //(x, y, R) f.stroke(); f.fill(); f.beginPath(); f.strokeStyle=»black»; f.lineWidth=»3″; f.fillStyle=»black»; f.arc(75, 105, 15, 0, 2*Math.PI, true ); //(x, y, R) f.stroke(); f.fill(); } function foor(){ // ring 1 let t=document.getElementById(«tahvel»).getContext(«2d»); //arc — дуга t.beginPath(); t.strokeStyle=»black»; t.lineWidth=»3″; t.fillStyle=»green»; t.arc(75, 70, 15, 0, 2*Math.PI, true ); //(x, y, R) t.stroke(); t.fill(); //ring red t.beginPath(); t.strokeStyle=»black»; t.lineWidth=»3″; t.fillStyle=»red»; t.arc(75, 140, 15, 0, 2*Math.PI, true ); //(x, y, R) t.stroke(); t.fill(); //ring yellow t.beginPath(); t.strokeStyle=»black»; t.lineWidth=»3″; t.fillStyle=»yellow»; t.arc(75, 105, 15, 0, 2*Math.PI, true ); //(x, y, R) t.stroke(); t.fill(); } function koik(){ joon(); ring(); ristkyylik(); valgusfoor(); foor(); heart(); } function heart(){ let t=document.getElementById(«tahvel»).getContext(«2d»); t.beginPath(); t.strokeStyle=»red»; t.lineWidth=»3″; t.fillStyle=»red»; t.arc(145, 45, 20, 0, 2*Math.PI, true ); //(x, y, R) t.stroke(); t.fill(); t.beginPath(); t.strokeStyle=»red»; t.lineWidth=»3″; t.fillStyle=»red»; t.arc(180, 45, 20, 0, 2*Math.PI, true ); //(x, y, R) t.stroke(); t.fill(); t.beginPath(); t.lineWidth=»2″; t.strokeStyle=»red»; t.moveTo(165, 100); //1 t.lineTo(165, 100); //2 t.lineTo(130, 60); t.lineTo(195, 60); //3 t.lineTo(195, 60); //start t.stroke(); t.fillStyle=»red»; t.fill(); } #tahvel{ background-color: lightblue; width: 50%; height: 50%; border-radius: 20px; } h1{ color: black; background-color: lightblue; border-top: 3pt solid steelblue; border-bottom: 3pt solid steelblue; border-radius: 20px; padding: 3px; } input[type=button]{ background-color: lightblue; color: black; padding: 20px 20px; border:1; } input[type=button]:hover{ background-color: steelblue; }