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):
<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);
:
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į:
<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);
:
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:
<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();
:
O dabar nupieškime užpildytą formą:
<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();
:
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:
<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);
:
