Joonistamine JS abil
Lipud
Majake
function wall(){ const housesmall = document.getElementById(“housesmall”); if (housesmall.getContext) { let mj = housesmall.getContext(“2d”); mj.fillStyle = ‘#964B00′ mj.fillRect(120, 150, 250 ,200) } } function roof(){ const housesmall = document.getElementById(“housesmall”); if (housesmall.getContext) { let mj = housesmall.getContext(“2d”); mj.beginPath(); mj.strokeStyle=’black’ mj.lineWidth = 5; mj.fillStyle = ‘#964B00’ mj.moveTo(30, 150); mj.lineTo(470, 150); mj.lineTo(250, 100); mj.lineTo(30, 150); mj.stroke(); mj.fill(); // mj.fillStyle = ‘black’; //mj.fillRect(20, 150, 450 ,5); } } function windowww(){ const housesmall = document.getElementById(“housesmall”); if (housesmall.getContext) { let mj = housesmall.getContext(“2d”); mj.fillStyle = ‘white’; mj.fillRect(140, 180, 50 ,50); mj.fillStyle = ‘white’; mj.fillRect(295, 180, 50 ,50); mj.fillStyle = ‘black’; mj.fillRect(140, 180, 5 ,50); mj.fillStyle = ‘black’; mj.fillRect(295, 180, 5 ,50); mj.fillStyle = ‘black’; mj.fillRect(140, 180, 50 ,5); mj.fillStyle = ‘black’; mj.fillRect(295, 180, 50 ,5); mj.fillStyle = ‘black’; mj.fillRect(190, 180, 5 ,50); mj.fillStyle = ‘black’; mj.fillRect(345, 180, 5 ,50); mj.fillStyle = ‘black’; mj.fillRect(140, 230, 55 ,5); mj.fillStyle = ‘black’; mj.fillRect(295, 230, 55 ,5); mj.fillStyle = ‘black’; mj.fillRect(140, 205, 55 ,5); mj.fillStyle = ‘black’; mj.fillRect(295, 205, 55 ,5); } } function chimney(){ const housesmall = document.getElementById(“housesmall”); if (housesmall.getContext) { let mj = housesmall.getContext(“2d”); mj.beginPath(); mj.strokeStyle=’black’ mj.lineWidth = 5; mj.fillStyle = ‘#964B00’ mj.moveTo(280, 70); mj.lineTo(320, 70); mj.lineTo(320, 150); mj.lineTo(280, 150); mj.lineTo(280, 68); mj.stroke(); mj.fill(); //mj.fillStyle = ‘#964B00’; //mj.fillRect(280, 70, 40 ,50); } } function doorfuc(){ const housesmall = document.getElementById(“housesmall”); if (housesmall.getContext) { let mj = housesmall.getContext(“2d”); mj.fillStyle = ‘white’; mj.fillRect(220, 250, 50 ,90); mj.fillStyle = ‘black’; mj.fillRect(220, 250, 5 ,90); mj.fillStyle = ‘black’; mj.fillRect(270, 250, 5 ,90); mj.fillStyle = ‘black’; mj.fillRect(220, 250, 50 ,5); mj.fillStyle = ‘black’; mj.fillRect(220, 340, 55 ,5); mj.fillStyle = ‘black’; mj.fillRect(245, 250, 5 ,90); mj.fillStyle = ‘black’; mj.fillRect(220, 295, 50 ,5); } } function grass(){ const housesmall = document.getElementById(“housesmall”); if (housesmall.getContext) { let mj = housesmall.getContext(“2d”); mj.beginPath(); mj.fillStyle = ‘lightgreen’ mj.moveTo(0, 190); mj.lineTo(500, 190); mj.lineTo(500, 500); mj.lineTo(0, 500); mj.lineTo(0, 190); mj.stroke(); mj.fill(); } } function skyfun(){ const housesmall = document.getElementById(“housesmall”); if (housesmall.getContext) { let mj = housesmall.getContext(“2d”); mj.beginPath(); mj.fillStyle = ‘lightblue’ mj.moveTo(0, 190); mj.lineTo(500, 190); mj.lineTo(500, 0); mj.lineTo(0, 0); mj.lineTo(0, 190); mj.fill(); } } function drawnfullhouse(){ grass(); skyfun(); wall(); roof(); windowww(); chimney(); doorfuc(); } function removeMajake() { const housesmall = document.getElementById(“housesmall”); if (housesmall.getContext) { let mj = housesmall.getContext(“2d”); //canvas nimi mj.clearRect(0, 0, 500, 500); } } function eestilipp(){ const lipp=document.getElementById(“lipp”); if (lipp.getContext) { let l = lipp.getContext(“2d”); //canvas nimi let img = new Image(); l.fillStyle = “blue”; l.fillRect(0,0,330,500); l.fillStyle = “black”; l.fillRect(0,70,330,70) l.fillStyle = “white”; l.fillRect(0,140,330,70) img.onload = function() { l.drawImage(img, 100, 40); }; img.src = ‘herb.png’; } } function fralipp(){ const lipp=document.getElementById(“lipp”); if (lipp.getContext) { let l = lipp.getContext(“2d”); l.fillStyle = “blue”; l.fillRect(0, 0, 110, 220); l.fillStyle = “white”; l.fillRect(110,0,220,220) l.fillStyle = “red”; l.fillRect(220,0,330,220) } } function remove(){ const lipp=document.getElementById(“lipp”); if (lipp.getContext) { let p = lipp.getContext(“2d”); //canvas nimi p.clearRect(0, 0, 400, 300); } } function removeSwis(){ const Swlipp=document.getElementById(“Swlipp”); if (Swlipp.getContext) { let p = Swlipp.getContext(“2d”); //canvas nimi p.clearRect(0, 0, 400, 300); } } function Switlipp(){ const lipp=document.getElementById(“Swlipp”); if (lipp.getContext) { let s = lipp.getContext(“2d”); s.fillStyle = “red”; s.fillRect(0, 0, 200, 200); s.fillStyle = “white”; s.fillRect(75, 30, 48, 130) s.fillStyle = ‘white’; s.fillRect(30, 75, 130, 48) } } //487, 224 94.4, 44.8 //712, 224 142.4, 44.8 //487, 974 94.4, 194.8 //712, 974 142.4, 194.8 //224, 487 44.8, 94.4 //974, 487 194.8, 194.8 //974, 712 194.8, 142.4 //224, 712 44.8, 142.4 // function japanlipp(){ const japanlipp=document.getElementById(“lipp”); if (japanlipp.getContext) { let j = japanlipp.getContext(“2d”); j.fillStyle = “white”; j.fillRect(0,0,330,220) j.beginPath(); j.arc(170, 110, 50, 0, 2*Math.PI, true); j.strokeStyle=’red’ j.fillStyle=’red’ j.fill(); j.stroke(); //joonista } } function kustuta(){ const pyhi=document.getElementById(“pyhi”); if (pyhi.getContext) { let p = pyhi.getContext(“2d”); //canvas nimi p.clearRect(0, 0, 400, 300); } } function ring(){ const pyhi=document.getElementById(“pyhi”); let radius=document.getElementById(“radius”); if (pyhi.getContext){ let p=pyhi.getContext(“2d”); //canvas nimi //ring p.beginPath();//algab tee p.arc(50, 50, 20, 0, 2*Math.PI, true); p.strokeStyle=’red’ p.stroke(); //joonista p.beginPath();//algab tee p.arc(100, 50, radius.value, 0, 2*Math.PI, true); p.fillStyle=’red’ p.fill(); //joonista } } //ristkulik function ristkulik(){ const pyhi=document.getElementById(“pyhi”); let laius=document.getElementById(“laius”); let korgus=document.getElementById(“korgus”); if (pyhi.getContext) { let p = pyhi.getContext(“2d”); //canvas nimi p.fillStyle=’green’; p.fillRect(100, 200, laius.value, korgus.value);// x,y, width, height } } function joon(){ const pyhi=document.getElementById(“pyhi”); if (pyhi.getContext) { let p = pyhi.getContext(“2d”); //canvas nimi //joon p.beginPath(); p.strokeStyle=’blue’; p.lineWidth = ‘2’; p.moveTo(300, 80); //alguspunkt p.lineTo(150, 80); //loppunkt p.stroke(); p.beginPath(); p.strokeStyle=’blue’; p.fillStyle=’green’;//Colour for p.fill(); p.lineWidth = ‘2’; p.moveTo(50, 100); //alguspunkt p.lineTo(150, 100); //loppunkt p.lineTo(150, 250); p.lineTo(50, 100); p.stroke() p.fill(); //If you want to fill the shape //kolmnurk } } canvas { background-color: lavender; /*width: 400px;*/ border: 1px solid gray; z-index: 10; }