Promena boje linije u canvas-u na JavaScript-u
Hajde sada da naučimo kako da promenimo boju konture
i popune. Za to postoje sledeća svojstva:
svojstvo strokeStyle postavlja
boju konture, a svojstvo fillStyle
- boju popune. Boje se postavljaju u uobičajenom
CSS
formatu.
Primer
Nacrtajmo konturu pomoću rect
i obojimo je u crvenu boju:
<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();
:
Primer
Nacrtajmo kvadratić pomoću rect
i popunimo ga zelenom bojom:
<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();
:
Napomena
Važno: kada postavite strokeStyle
ili fillStyle, nova vrednost će se primeniti
na sve oblike koji će biti nacrtani
od tog momenta. Za svaki oblik za koji
vam je potrebna drugačija boja, morate ponovo postaviti
vrednost fillStyle ili strokeStyle.
