Spreminjanje barve črte v canvas v JavaScriptu
Zdaj se naučimo spreminjati barvo obrobe
in polnila. Za to so na voljo naslednje lastnosti:
lastnost strokeStyle nastavi
barvo obrobe, lastnost fillStyle
pa barvo polnila. Barve se nastavijo v običajnem
CSS
formatu.
Primer
Narišimo obrobe s pomočjo rect
in jo pobarvajmo rdeče:
<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
Narišimo kvadrat s pomočjo rect
in ga pobarvajmo zeleno:
<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();
:
Opomba
Pomembno: ko nastavite strokeStyle
ali fillStyle, se nova vrednost uporabi
za vse oblike, ki bodo narisane
od tega trenutka naprej. Za vsako obliko, za katero
potrebujete drugo barvo, morate prepisati
vrednost fillStyle ali strokeStyle.
