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:

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

Результат:

Příklad

Nakresleme čtverec pomocí rect a vyplňme jej zelenou barvou:

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é: 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.

Praktické úlohy