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:

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, 100);
ctx.strokeStyle = 'red';
ctx.stroke();

Результат:

Esimerkki

Piirretään neliö käyttäen rect ja väritetään se vihreäksi:

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, 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.

Käytännön tehtävät