Desenarea liniilor prin canvas în JavaScript
Să începem cu ceva simplu - desenarea liniilor. Pentru a înțelege cum se face acest lucru, imaginați-vă că aveți o foaie de hârtie și un creion. Puteți desena pe această foaie, sau puteți, fără a desena, doar să mutați creionul în punctul dorit.
La fel funcționează și JavaScript: acesta are
un creion (sau un stilou pentru desen), în locul
dorit îl puteți muta folosind
metoda moveTo, iar pentru a desena - folosind
metoda lineTo.
Ambele metode au ca parametri punctul în
care să se miște vârful stiloului - primul parametru
coordonata orizontală, iar al doilea -
verticala. Originea coordonatelor - punctul 0,
0 - este colțul din stânga sus al elementului.
Când stiloul se mută în punctul dorit -
metoda moveTo doar îl mută, iar
lineTo în procesul de mutare desenează
o linie de la poziția curentă a stiloului până la punctul
în care acesta se mută.
Cu toate acestea, dacă rulezi codul de mai sus
- nu se va întâmpla nimic: este necesar să scriem
încă două comenzi: prima comandă beginPath
trebuie să fie indicată înainte de a începe desenarea
liniei, iar a doua comandă stroke trebuie
să fie apelată după toate combinațiile de moveTo
și lineTo pentru ca linia să fie desenată.
Deci, haideți să scriem un cod funcțional pentru desenarea unei linii:
Să desenăm o linie
<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();
:
Să desenăm o săgeată
<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();
:
Să desenăm un triunghi
<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();
:
Să desenăm un pătrat
<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();
:
Închiderea figurilor
Pentru a desena o figură închisă nu este obligatoriu
să desenați toate liniile - ultima linie poate
fi desenată automat și poate închide figura.
Pentru aceasta, înainte de metoda stroke trebuie
să apelați metoda closePath.
Această metodă încearcă să închidă figura, desenând o linie dreaptă din punctul final în cel inițial. Dacă figura era deja închisă sau este doar un punct, atunci metoda nu face nimic.
Haideți să desenăm un triunghi, folosind 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); - omitem acest pas
ctx.closePath();
ctx.stroke();
:
Umplerea figurilor
În locul metodei stroke poate fi utilizată
metoda fill - în acest caz figura nu este neapărat
obligată să fie complet închisă - ea va fi umplută
și așa:
<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); - omitem acest pas
//ctx.closePath(); - și pe acesta de asemenea
ctx.fill();
:
