Промяна на цвета на линията в canvas в JavaScript
Нека сега се научим да променяме цвета на контура
и запълването. За това има следните свойства:
свойството strokeStyle задава
цвят на контура, а свойството fillStyle
- цвят на запълването. Цветовете се задават в обикновен
CSS
формат.
Пример
Нека нарисуваме контур с помощта на rect
и да го оцветим в червено:
<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();
:
Пример
Нека нарисуваме квадрат с помощта на rect
и да го оцветим в зелен цвят:
<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();
:
Забележка
Важно: когато зададете strokeStyle
или fillStyle, новата стойност ще се приложи
за всички фигури, които ще бъдат нарисувани
от този момент. За всяка фигура, за която
ви трябва различен цвят, трябва да презапишете
стойността на fillStyle или strokeStyle.
