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:

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

Результат:

Exemplu

Să desenăm un pătrat cu rect și să-l colorăm în verde:

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

Результат:

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.

Sarcini practice