Viivan värin vaihtaminen canvas:ssa JavaScriptillä
Opitaan nyt vaihtamaan ääriviivan ja täytön väriä.
Tätä varten on seuraavat ominaisuudet:
ominaisuus strokeStyle asettaa
ääriviivan värin, ja ominaisuus fillStyle
- täytön värin. Värit asetetaan tavallisessa
CSS
muodossa.
Esimerkki
Piirretään ääriviiva käyttäen rect
ja väritetään se punaiseksi:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 100);
ctx.strokeStyle = 'red';
ctx.stroke();
:
Esimerkki
Piirretään neliö käyttäen rect
ja väritetään se vihreäksi:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'green';
ctx.fill();
:
Huomautus
Tärkeää: kun asetat strokeStyle
tai fillStyle, uusi arvo koskee
kaikkia kuvioita, jotka piirretään
tästä hetkestä lähtien. Jokaiselle kuviolle, jolle
tarvitset eri värin, sinun on asetettava uudelleen
fillStyle tai strokeStyle arvo.
