Давайте теперь научимся менять цвет контура
и заливки. Для этого есть следующие свойства:
свойство 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.