Stačiakampių piešimas per canvas naudojant JavaScript

Kvadratus ir stačiakampius nebūtinai reikia piešti naudojant moveTo, lineTo kombinacijas - tam yra paprastesni metodai. Pažvelkime į juos.

strokeRect metodas

Metodas strokeRect(x, y, plotis, aukštis) piešia stačiakampio kontūrą nurodytame taške. Pirmieji du parametrai nurodo taško koordinates, kuriame bus nupiešto stačiakampio viršutinis kairysis kampas.

Nupieškime stačiakampį naudodami strokeRect (laikykime, kad ctx jau yra):

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

Результат:

fillRect metodas

Metodas fillRect(x, y, plotis, aukštis) veikia taip pat, kaip ir strokeRect, tik piešia užpildytą stačiakampį. Pažiūrėkime pavyzdį:

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

Результат:

rect metodas

Kitas metodas rect(x, y, plotis, aukštis) taip pat piešia stačiakampį. Bet šis stačiakampis taps matomas tik tada, kai bus pritaikytas metodas stroke arba fill. Pirmuoju atveju bus kontūras, o antruoju - užpildyta forma.

Nupieškime kontūrą naudodami 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();

Результат:

O dabar nupieškime užpildytą formą:

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

Результат:

clearRect metodas

Kitas metodas clearRect(x, y, plotis, aukštis) veikia kaip trintukas, valdantis stačiakampę sritį ir padarantis turinį visiškai skaidriu.

Nupieškime kvadratėlį naudodami fillRect ir ištrinkime jo dalį naudodami 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);

Результат: