Změna barvy čáry v canvasu v JavaScriptu
Nyní se naučme měnit barvu obrysu
a výplně. K tomu slouží následující vlastnosti:
vlastnost strokeStyle nastavuje
barvu obrysu, a vlastnost fillStyle
- barvu výplně. Barvy se nastavují v obvyklém
CSS
formátu.
Příklad
Nakresleme obrys pomocí rect
a obarvíme jej na červenou:
<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();
:
Příklad
Nakresleme čtverec pomocí rect
a vyplňme jej zelenou barvou:
<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é: když nastavíte strokeStyle
nebo fillStyle, nová hodnota se použije
pro všechny obrazce, které budou nakresleny
od tohoto okamžiku. Pro každý obrazec, pro který
potřebujete jinou barvu, musíte přepsat
hodnotu fillStyle nebo strokeStyle.
