Zmena farby čiary v canvas-e v JavaScripte

Teraz sa naučme, ako zmeniť farbu obrysu a výplne. Na to slúžia nasledujúce vlastnosti: vlastnosť strokeStyle nastavuje farbu obrysu a vlastnosť fillStyle - farbu výplne. Farby sa nastavujú v bežnom CSS formáte.

Príklad

Nakreslime obrys pomocou rect a zafarbime ho na červenú:

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

Результат:

Príklad

Nakreslime štvorček pomocou rect a zafarbime ho na zelenú:

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

Результат:

Poznámka

Dôležité: keď nastavíte strokeStyle alebo fillStyle, nová hodnota sa použije pre všetky tvary, ktoré budú od tohto momentu nakreslené. Pre každý tvar, pre ktorý potrebujete inú farbu, musíte prepísať hodnotu fillStyle alebo strokeStyle.

Praktické úlohy