Ristkülikute joonistamine canvas'i abil JavaScriptis
Ruute ja ristkülikuid ei pea tingimata
joonistama moveTo ja lineTo
kombinatsioonidega - selleks on lihtsamad meetodid.
Vaatame neid lähemalt.
Meetod strokeRect
Meetod strokeRect(x, y, laius,
kõrgus) joonistab etteantud punkti ristküliku
äärisjoonise. Esimesed kaks parameetrit määravad
punkti koordinaadid, kus asub joonistatud ristküliku
ülemine vasak nurk.
Joonistame ristküliku meetodiga strokeRect
(eeldame, et ctx on juba olemas):
<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);
:
Meetod fillRect
Meetod fillRect(x, y, laius, kõrgus)
töötab samamoodi nagu strokeRect,
kuid joonistab täidetud ristküliku.
Vaatame näidet:
<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);
:
Meetod rect
Järgmine meetod rect(x, y, laius,
kõrgus) joonistab samuti ristküliku. Kuid
see ristkülik muutub nähtavaks ainult siis,
kui rakendada meetodit stroke või fill.
Esimesel juhul saab äärisjoonise, teisel juhul
täidetud kujundi.
Joonistame äärisjoonise meetodiga 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();
:
Ja nüüd joonistame täidetud kujundi:
<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();
:
Meetod clearRect
Järgmine meetod clearRect(x, y,
laius, kõrgus) töötab nagu kustutuskumm,
puhastades ristkülikukujulise ala ja muutes
selle sisu täielikult läbipaistvaks.
Joonistame ruudu meetodiga fillRect
ja kustutame selle osa meetodiga 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);
:
