Joonistamine

Lipud

function ring(){ //x,y – keskpunkt, R -raadius t=document.getElementById(“tahvel”); if(tahvel.getContext){ let t=tahvel.getContext(“2d”); t.beginPath(); t.arc(50 ,50 ,30, 0, 2 *Math.PI, true); t.strokeStyle=”purple”; t.stroke();//ümberjoon t.fillStyle=”hotpink”; t.fill(); } } function ring2(){ //x,y – keskpunkt, R -raadius t=document.getElementById(“tahvel”); if(tahvel.getContext){ let t=tahvel.getContext(“2d”); t.beginPath(); t.arc(130 ,50 ,20,0 ,2 *Math.PI, true); t.strokeStyle=”red”; t.stroke();//ümberjoon t.fillStyle=”plum”; t.fill(); } } function kustuta(){ const tahvel=document.getElementById(“tahvel”); if(tahvel.getContext){ let t=tahvel.getContext(“2d”); t.clearRect(0, 0, 400, 400); } } function ristkylik(){ const tahvel=document.getElementById(“tahvel”); if(tahvel.getContext){ let t=tahvel.getContext(“2d”); t.fillStyle=”lavander”; t.fillRect(180,110,200, 200); } } //joon function joon(){ t=document.getElementById(“tahvel”); if(tahvel.getContext){ let t=tahvel.getContext(“2d”); t.beginPath(); t.lineWidth=”5″ t.moveTo(50, 60); t.lineTo(100, 40); t.lineTo(180, 90); t.lineTo(50, 60); t.strokeStyle=”purple”; t.stroke(); } } function eesti(){ const lipp=document.getElementById(“lipp”); if(lipp.getContext){ let l=lipp.getContext(“2d”); l.fillStyle=”blue”; l.fillRect(0, 0, 330, 70); l.fillStyle=”black”; l.fillRect(0, 70, 330, 140); l.fillStyle=”white”; l.fillRect(0, 140, 330, 210); } } function japanese(){ const lipp=document.getElementById(“lipp”); if(lipp.getContext){ let l=lipp.getContext(“2d”); l.fillStyle=”white”; l.fillRect(0, 0, 330, 210); l.beginPath(); l.arc(150 , 105,50, 0, 2 *Math.PI, true); l.stroke(); l.fillStyle=”red”; l.fill(); } } function germany(){ const lipp=document.getElementById(“lipp”); if(lipp.getContext){ let l=lipp.getContext(“2d”); l.fillStyle=”black”; l.fillRect(0, 0, 330, 70); l.fillStyle=”red”; l.fillRect(0, 70, 330, 140); l.fillStyle=”yellow”; l.fillRect(0, 140, 330, 210); } } function kustuta1(){ const lipp=document.getElementById(“lipp”); if(lipp.getContext){ let l=lipp.getContext(“2d”); l.clearRect(0, 0, 330, 210); } } function sweden(){ const lipp=document.getElementById(“lipp”); if(lipp.getContext){ let l=lipp.getContext(“2d”); l.fillStyle=”blue”; l.fillRect(0, 0, 110, 210); l.fillStyle=”yellow”; l.fillRect(110, 0, 50, 210); l.fillStyle=”blue”; l.fillRect(160, 0, 170, 210); l.fillStyle=”yellow”; l.fillRect(0, 80, 330, 50); } } function finland(){ const lipp=document.getElementById(“lipp”); if(lipp.getContext){ let l=lipp.getContext(“2d”); l.fillStyle=”white”; l.fillRect(0, 0, 110, 210); l.fillStyle=”blue”; l.fillRect(110, 0, 50, 210); l.fillStyle=”white”; l.fillRect(160, 0, 170, 210); l.fillStyle=”blue”; l.fillRect(0, 80, 330, 50); } } function switzerland(){ const lipp=document.getElementById(“lipp1”); if(lipp.getContext){ let l=lipp.getContext(“2d”); l.fillStyle=”red”; l.fillRect(0, 0, 210, 210); l.fillStyle=”white”; l.fillRect(75, 30, 60, 150); l.fillStyle=”white”; l.fillRect(30, 75, 150, 60); } } function kustuta2(){ const lipp=document.getElementById(“lipp1”); if(lipp.getContext){ let l=lipp.getContext(“2d”); l.clearRect(0, 0, 210, 210); } } canvas#tahvel{ background-color: pink; border: 1px solid palevioletred; } canvas#lipp{ border: 1px solid black; } canvas#lipp1{ border: 1px solid black; } canvas#pyhi{ border: 1px solid black; }