Taisnstūru zīmēšana ar canvas JavaScript

Kvadrātus un taisnstūrus ne vienmēr ir jāzīmē izmantojot moveTo, lineTo kombinācijas - tam ir vienkāršākas metodes. Apskatīsim tās.

Metode strokeRect

Metode strokeRect(x, y, platums, augstums) zīmē norādītajā punktā taisnstūra kontūru. Pirmie divi parametri norāda koordinātas punktam, kurā atradīsies augšējā kreisā zīmētā taisnstūra stūra.

Uzzīmēsim taisnstūri ar strokeRect (pieņemam, ka ctx jau ir definēts):

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.strokeRect(50, 50, 100, 75);

Результат:

Metode fillRect

Metode fillRect(x, y, platums, augstums) strādā līdzīgi kā strokeRect, tikai zīmē aizpildītu taisnstūri. Apskatīsim piemērā:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.fillRect(50, 50, 100, 75);

Результат:

Metode rect

Nākamā metode rect(x, y, platums, augstums) arī zīmē taisnstūri. Bet šis taisnstūris kļūs redzams tikai ja izmantosim metodi stroke vai fill. Pirmajā gadījumā būs kontūrs, bet otrajā - aizpildīta forma.

Uzzīmēsim kontūru ar rect:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 75);
ctx.stroke();

Результат:

Un tagad uzzīmēsim aizpildītu formu:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 75);
ctx.fill();

Результат:

Metode clearRect

Nākamā metode clearRect(x, y, platums, augstums) strādā kā dzēšgumija, notīrot taisnstūrveida laukumu un padarot saturu pilnīgi caurspīdīgu.

Uzzīmēsim kvadrātu ar fillRect un izdzēsīsim tā daļu ar clearRect:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);

Результат: