Zmiana koloru linii w canvas w JavaScript

Teraz nauczmy się zmieniać kolor obrysu i wypełnienia. Służą do tego następujące właściwości: właściwość strokeStyle ustawia kolor obrysu, a właściwość fillStyle - kolor wypełnienia. Kolory są ustawiane w zwykłym formacie CSS.

Przykład

Narysujmy obrys za pomocą rect i pokolorujmy go na czerwono:

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

Результат:

Przykład

Narysujmy kwadracik za pomocą rect i pokolorujmy go na zielono:

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

Результат:

Uwaga

Ważne: gdy ustawisz strokeStyle lub fillStyle, nowa wartość zostanie zastosowana dla wszystkich kształtów, które zostaną narysowane od tego momentu. Dla każdego kształtu, dla którego potrzebujesz innego koloru, musisz nadpisać wartość fillStyle lub strokeStyle.

Zadania praktyczne