Промяна на цвета на линията в canvas в JavaScript

Нека сега се научим да променяме цвета на контура и запълването. За това има следните свойства: свойството strokeStyle задава цвят на контура, а свойството fillStyle - цвят на запълването. Цветовете се задават в обикновен CSS формат.

Пример

Нека нарисуваме контур с помощта на rect и да го оцветим в червено:

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

Результат:

Пример

Нека нарисуваме квадрат с помощта на rect и да го оцветим в зелен цвят:

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

Результат:

Забележка

Важно: когато зададете strokeStyle или fillStyle, новата стойност ще се приложи за всички фигури, които ще бъдат нарисувани от този момент. За всяка фигура, за която ви трябва различен цвят, трябва да презапишете стойността на fillStyle или strokeStyle.

Практически задачи