Suorakulmioiden piirtäminen canvasin avulla JavaScriptillä
Neliöitä ja suorakulmioita ei välttämättä tarvitse
piirtää käyttämällä moveTo,
lineTo -yhdistelmiä - niitä varten on olemassa yksinkertaisempia menetelmiä.
Käydään ne läpi.
strokeRect-metodi
strokeRect(x, y, leveys,
korkeus)-metodi piirtää suorakulmion ääriviivat
annettuun pisteeseen. Kaksi ensimmäistä parametria määrittävät
pisteen koordinaatit, jossa piirretyn suorakulmion vasen
ylänurkka sijaitsee.
Piirretään suorakulmio käyttämällä
strokeRect -metodia (oletamme, että ctx
on jo määritetty):
<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-metodi
fillRect(x, y, leveys, korkeus)
-metodi toimii samoin kuin strokeRect,
mutta piirtää täytetyn suorakulmion.
Katsotaan esimerkkiä:
<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-metodi
Seuraava rect(x, y, leveys,
korkeus)-metodi piirtää myös suorakulmion. Mutta
tämä suorakulmio tulee näkyviin vasta
kun käytetään stroke- tai fill-metodia.
Ensimmäisessä tapauksessa saat ääriviivat ja toisessa
- täytetyn muodon.
Piirretään ääriviivat käyttämällä rect-metodia:
<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();
:
Piirretään nyt täytetty muoto:
<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-metodi
Seuraava clearRect(x, y,
leveys, korkeus)-metodi toimii kuin pyyhekumi,
tyhjentää suorakulmaisen alueen ja tekee
sisällöstä täysin läpinäkyvän.
Piirretään pieni neliö käyttämällä fillRect
ja pyyhitään osa siitä clearRect-metodilla:
<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);
:
