Vizatimi i vijave përmes canvas në JavaScript
Le të fillojmë me diçka të thjeshtë - vizatimin e vijave. Për të kuptuar se si bëhet kjo, imagjinoni se keni një fletë letre dhe një laps. Ju mund të vizatoni në këtë fletë, ose mund të lëvizni thjesht lapsin në pikën e dëshiruar pa vizatuar.
Po kështu funksionon edhe JavaScript: ai ka një
laps (ose stilolaps për vizatim), në vendin
e duhur ju mund ta lëvizni atë duke përdorur
metodën moveTo, dhe të vizatoni - duke përdorur
metodën lineTo.
Të dy metodat pranojnë si parametra pikën, në
të cilën të lëvizë maja e stilolapsit - parametri i parë
koordinatën horizontale, dhe i dyti - atë
vertikale. Origjina e koordinatave - pika 0,
0 - është këndi i sipërm i majtë i elementit.
Kur stilolapsi lëviz në pikën e dëshiruar -
metoda moveTo thjesht e lëviz atë, ndërsa
lineTo gjatë lëvizjes vizaton një
vijë nga pozicioni aktual i stilolapsit deri në pikën
në të cilën ai do të lëvizë.
Megjithatë, nëse ekzekutoni kodin e mësipërm
- asgjë nuk do të ndodhë: është e nevojshme të shkruhen
dy komanda të tjera: komanda e parë beginPath
duhet të specifohet përpara fillimit të vizatimit të
vijës, dhe komanda e dytë stroke duhet
të thirret pas të gjitha kombinimeve të moveTo
dhe lineTo në mënyrë që vija të vizatohet.
Pra, le të shkruajmë kodin funksional për vizatimin e vijës:
Le të vizatojmë një vijë
<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();
:
Le të vizatojmë një zog
<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();
:
Le të vizatojmë një trekëndësh
<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();
:
Le të vizatojmë një katror
<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();
:
Mbyllja e figurave
Për të vizatuar një figurë të mbyllur nuk është domosdoshmërisht
të bëhen të gjitha vijat - vija e fundit mund të
vizatohet automatikisht dhe të mbyllë figurën.
Për këtë, përpara metodës stroke duhet
të thirret metoda closePath.
Kjo metodë përpiqet të mbyllë figurën, duke vizatuar një vijë të drejtë nga pika e fundit në atë fillestare. Nëse figura ishte e mbyllur tashmë ose është thjesht një pikë, atëherë metoda nuk bën asgjë.
Le të vizatojmë një trekëndësh, duke përdorur 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); - këtë hap e heqim
ctx.closePath();
ctx.stroke();
:
Ngjyrosja e figurave
Në vend të metodës stroke mund të përdoret
metoda fill - në këtë rast figura nuk është domosdoshmërisht
e nevojshme të jetë plotësisht e mbyllur - ajo do të ngjyroset
edhe kështu:
<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); - këtë hap e heqim
//ctx.closePath(); - dhe këtë gjithashtu
ctx.fill();
:
