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:
<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();
:
Przykład
Narysujmy kwadracik za pomocą rect
i pokolorujmy go na zielono:
<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();
:
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.
