Joonte joonistamine canvas'i abil JavaScriptis
Alustame lihtsast - joonte joonistamisest. Selleks, et mõista, kuidas seda tehakse, kujutlege, et teil on paberileht ja pliiats. Te võite sellel lehel joonistada või lihtsalt ilma joonistamata liigutada pliiatsi soovitud punkti.
Samamoodi töötab ka JavaScript: sellel on
pliiats (või joonistuspastakas), õigesse
kohta saate seda liigutada kasutades
meetodit moveTo, ja joonistada - kasutades
meetodit lineTo.
Mõlemad meetodid võtavad parameetriteks punkti,
kuhu pastaka ots liigutada - esimeseks parameetriks
horisontaal-koordinaadi ja teiseks -
vertikaal-koordinaadi. Koordinaatide alguspunkt - punkt 0,
0 - on elemendi ülemine vasak nurk.
Kui pastakas liigub soovitud punkti -
meetod moveTo lihtsalt liigutab, aga
lineTo liikumise käigus joonistab
joone praegusest pastaka asukohast punktini,
kuhu see liigub.
Siiski, kui käivitada ülaltoodud kood
- ei juhtu midagi: on vaja kirjutada
kaks käsku veel: esimene käsk beginPath
tuleb määrata enne joone joonistamise algust
ja teine käsk stroke tuleb
kutsuda pärast kõiki moveTo
ja lineTo kombinatsioone selleks, et joon joonistuks.
Nii, kirjutame töötava koodi joone joonistamiseks:
Joonistame joone
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
:
Joonistame linnukese
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
:
Joonistame kolmnurga
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();
:
Joonistame ruudu
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
:
Kujundite sulgemine
Suletud kujundi joonistamiseks ei ole tingimata vaja
teha kõiki jooni - viimane joon võib
joonistuda automaatselt ja kujund suletakse.
Selleks tuleb enne meetodit stroke
kutsuda välja meetod closePath.
See meetod üritab kujundit sulgeda, joonistades sirge joone lõpp-punktist alguspunkti. Kui kujund oli juba suletud või on lihtsalt punkt, siis meetod ei tee midagi.
Joonistame kolmnurga, kasutades closePath:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - jätame selle sammu vahele
ctx.closePath();
ctx.stroke();
:
Kujundite täitmine
Meetodi stroke asemel saab kasutada
meetodit fill - sel juhul ei pea kujund
tingimata olema täielikult suletud - see täidetakse
niikuinii:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - jätame selle sammu vahele
//ctx.closePath(); - ja selle ka
ctx.fill();
:
