Risanje črt preko canvas v JavaScript

Začnimo s preprostim - z risanjem črt. Da razumemo, kako to deluje, predstavljajte si, da imate list papirja in svinčnik. Lahko rišete na tem listu ali pa brez risanja preprosto premikate svinčnik na želeno točko.

Enako deluje tudi JavaScript: ima svinčnik (ali pisalo za risanje), na želeno mesto ga lahko premaknete z uporabo metode moveTo, rišete pa z uporabo metode lineTo.

Obe metodi kot parameter sprejemata točko, v katero premakniti konico pisala - prvi parameter je koordinata vodoravno, drugi pa navpično. Začetek koordinat je točka 0, 0 - to je zgornji levi kot elementa.

Ko se pisalo premakne na želeno točko - metoda moveTo preprosto premakne, lineTo pa med premikanjem riše črto od trenutnega položaja pisala do točke, v katero se premakne.

Vendar, če zaženete zgoraj navedeno kodo - ne bo se zgodilo nič: potrebno je napisati še dve ukazi: prvi ukaz beginPath mora biti naveden pred začetkom risanja črte, drugi ukaz stroke pa mora biti klican po vseh kombinacijah moveTo in lineTo, da se črta dejansko nariše.

Torej, napišimo delujočo kodo za risanje črte:

Narišimo črto

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();

Результат:

Narišimo ptičko

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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();

Результат:

Narišimo trikotnik

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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();

Результат:

Narišimo kvadratček

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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();

Результат:

Zapiranje likov

Za risanje zaprtega lika ni nujno narediti vseh črt - zadnja črta se lahko nariše samodejno in zapre lik. Za to je treba pred metodo stroke poklicati metodo closePath.

Ta metoda poskuša zapreti lik z risanjem ravne črte od končne točke do začetne. Če je bil lik že zaprt ali je preprosto točka, potem metoda ne naredi nič.

Narišimo trikotnik z uporabo closePath:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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); - ta korak izpustimo
ctx.closePath();
ctx.stroke();

Результат:

Barvanje likov

Namesto metode stroke je mogoče uporabiti metodo fill - pri tem lik ni nujno povsem zaprt - prebarval se bo tudi tako:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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); - ta korak izpustimo
//ctx.closePath(); - in tega tudi
ctx.fill();

Результат:

Praktične naloge