Joone värvi muutmine canvas-is JavaScripti abil
Õpime nüüd muutama ääristuse
ja täite värvi. Selleks on järgmised omadused:
omadus strokeStyle määrab
ääristuse värvi ja omadus fillStyle
- täite värvi. Värvid määratakse tavapärasel
CSS
vormingul.
Näide
Joonistame ääristuse abil rect
ja värvime selle punaseks:
<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();
:
Näide
Joonistame ruudu abil rect
ja värvime selle roheliseks:
<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();
:
Märkus
Tähtis: kui määrate strokeStyle
või fillStyle, rakendub uus väärtus
kõikidele kujunditele, mis joonistatakse
sellest hetkest alates. Iga kujundi jaoks, millele
vajate teist värvi, peate üle kirjutama
väärtuse fillStyle või strokeStyle.
