Vizatimi i drejtkëndëshave përmes canvas në JavaScript
Katrorët dhe drejtkëndëshat nuk është e domosdoshme
të vizatohen duke përdorur kombinime të moveTo,
lineTo - për këtë ka metoda më të thjeshta.
Le t'i shqyrtojmë ato.
Metoda strokeRect
Metoda strokeRect(x, y, gjerësi,
lartësi) vizaton në pikën e caktuar konturin
e drejtkëndëshit. Dy parametrat e parë përcaktojnë
koordinatat e pikës, në të cilën do të jetë cepi i
sipërm i majtë i drejtkëndëshit të vizatuar.
Le të vizatojmë një drejtkëndësh duke përdorur
strokeRect (supozojmë se ctx
ekziston tashmë):
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.strokeRect(50, 50, 100, 75);
:
Metoda fillRect
Metoda fillRect(x, y, gjerësi, lartësi)
funksionon njësoj si strokeRect,
por vizaton një drejtkëndësh të mbushur.
Le ta shohim me një shembull:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 75);
:
Metoda rect
Metoda tjetër rect(x, y, gjerësi,
lartësi) gjithashtu vizaton një drejtkëndësh. Por
ky drejtkëndësh do të bëhet i dukshëm vetëm
nëse zbatohet metoda stroke ose fill.
Në rastin e parë do të jetë kontur, kurse në të dytin
- figurë e mbushur.
Le të vizatojmë një kontur duke përdorur rect:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.stroke();
:
Tani le të vizatojmë një figurë të mbushur:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.fill();
:
Metoda clearRect
Metoda tjetër clearRect(x, y,
gjerësi, lartësi) funksionon si një gomë,
që pastron një zonë drejtkëndëshe dhe e bën
përmbajtjen krejtësisht transparente.
Le të vizatojmë një katror duke përdorur fillRect
dhe të fshijmë një pjesë të tij duke përdorur clearRect:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);
:
