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):
<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);
:
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ā:
<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);
:
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:
<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();
:
Un tagad uzzīmēsim aizpildītu formu:
<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();
:
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:
<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);
:
