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:

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

Результат:

Primer

Narišimo kvadrat s pomočjo rect in ga pobarvajmo zeleno:

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

Результат:

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.

Praktične naloge