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
<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();
:
Nacrtajmo pticu
<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();
:
Nacrtajmo trougao
<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();
:
Nacrtajmo kvadratić
<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();
:
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:
<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); - 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:
<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); - ovaj korak izostavljamo
//ctx.closePath(); - i ovaj takođe
ctx.fill();
:
