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:

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();

Результат:

Näide

Joonistame ruudu abil rect ja värvime selle roheliseks:

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();

Результат:

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.

Praktilised ülesanded