Schimbarea culorii liniei în canvas pe JavaScript
Să învățăm acum cum să schimbăm culoarea conturului
și a umplerii. Pentru aceasta există următoarele proprietăți:
proprietatea strokeStyle stabilește
culoarea conturului, iar proprietatea fillStyle
- culoarea umplerii. Culorile sunt stabilite în formatul
CSS
obișnuit.
Exemplu
Să desenăm un contur cu rect
și să-l colorăm în roșu:
<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();
:
Exemplu
Să desenăm un pătrat cu rect
și să-l colorăm în verde:
<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();
:
Observație
Important: când setați strokeStyle
sau fillStyle, noua valoare se va aplica
pentru toate formele care vor fi desenate
din acest moment. Pentru fiecare formă, pentru care
aveți nevoie de o culoare diferită, trebuie să rescrieți
valoarea fillStyle sau strokeStyle.
