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):

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);

Результат:

Meetod fillRect

Meetod fillRect(x, y, laius, kõrgus) töötab samamoodi nagu strokeRect, kuid joonistab täidetud ristküliku. Vaatame näidet:

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);

Результат:

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:

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();

Результат:

Ja nüüd joonistame täidetud kujundi:

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();

Результат:

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:

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);

Результат: