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ú:
<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();
:
Príklad
Nakreslime štvorček pomocou rect
a zafarbime ho na zelenú:
<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();
:
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.
