Crtanje linija pomoću canvas-a u JavaScript-u

Počnimo od jednostavnog - crtanja linija. Da biste razumeli kako se to radi, zamislite da imate list papira i olovku. Možete crtati na ovom listu, ili možete, bez crtanja, jednostavno pomerati olovku do željene tačke.

JavaScript funkcioniše na sličan način: on ima olovku (ili pero za crtanje), do željenog mesta možete je pomeriti pomoću metode moveTo, a crtati - pomoću metode lineTo.

Oba metoda kao parametre primaju tačku u koju se pomera vrh pera - prvim parametrom koordinatu po horizontali, a drugim - po vertikali. Početak koordinata - tačka 0, 0 - to je gornji levi ugao elementa.

Kada se pero pomera do željene tačke - metoda moveTo jednostavno pomera, a lineTo u procesu pomeranja crta liniju od trenutnog položaja pera do tačke u koju će se ono pomeriti.

Međutim, ako pokrenete gore navedeni kod - ništa se neće desiti: potrebno je napisati još dve komande: prva komanda beginPath mora biti navedena pre početka crtanja linije, a druga komanda stroke mora biti pozvana nakon svih kombinacija moveTo i lineTo kako bi se linija nacrtala.

Dakle, hajde da napišemo funkcionalni kod za crtanje linije:

Nacrtajmo liniju

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

Результат:

Nacrtajmo pticu

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

Результат:

Nacrtajmo trougao

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

Результат:

Nacrtajmo kvadratić

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

Результат:

Zatvaranje figura

Za crtanje zatvorene figure nije obavezno praviti sve linije - poslednja linija može se nacrtati automatski i zatvoriti figuru. Za to, pre metode stroke treba pozvati metodu closePath.

Ovaj metod pokušava da zatvori figuru, crtajući pravu liniju iz krajnje tačke u početnu. Ako je figura već zatvorena ili je jednostavno tačka, onda metod ne radi ništa.

Hajde da nacrtamo trougao, koristeći 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); - ovaj korak izostavljamo
ctx.closePath();
ctx.stroke();

Результат:

Bojenje figura

Umesto metode stroke možete koristiti metodu fill - pri tome figura ne mora nužno biti potpuno zatvorena - obojiće se i ovako:

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); - ovaj korak izostavljamo
//ctx.closePath(); - i ovaj takođe
ctx.fill();

Результат:

Praktični zadaci