Свойство CanvasRenderingContext2D
.fillStyle
, предосталяемое Canvas 2D API, задает цвет или стиль, используемый при заливке фигур. По умолчанию установлено значение #000
(черный цвет).
См. также главу Applying styles and color в Canvas Tutorial.
Синтаксис
ctx.fillStyle = color; ctx.fillStyle = gradient; ctx.fillStyle = pattern;
Значения
color
DOMString
строка, содержащая цвет в формате, поддерживающимся стандартом CSS (<color>
).gradient
- Объект класса
CanvasGradient
(линейный или круговой градиент ). pattern
- Объект класса
CanvasPattern
(повторяющееся изображение).
Примеры
Изменение цвета заливки фигуры
Ниже представлен простой фрагмент кода, использующий fillStyle
с цветом.
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);
Результат
Использование fillStyle в циклах for
В этом примере мы используем два цикла для рисования сетки из прямоугольников, каждый из которых будет закрашен разным цветом. Получившееся изображение должно выглядеть как на скриншоте . Здесь нет ничего сложного. Мы используем две переменные i
и j
, чтобы создать уникальный цвет для каждого квадрата, смешивая красный и зеленый цвета. Значение синего цвета изменяться не будет. Изменяя значения цветов, вы можете создать все цвета. Увеличив количество шагов, вы сможете создать цветовую палитру, наподобие той, которая используется в Photoshop.
<canvas id="canvas" width="150" height="150"></canvas>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
for (let i = 0; i < 6; i++) {
for (let j = 0; j < 6; j++) {
ctx.fillStyle = `rgb(
${Math.floor(255 - 42.5 * i)},
${Math.floor(255 - 42.5 * j)},
0)`;
ctx.fillRect(j * 25, i * 25, 25, 25);
}
}
Результат:
Screenshot | Live sample |
---|---|
![]() |
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
HTML Living Standard Определение 'CanvasRenderingContext2D.fillStyle' в этой спецификации. |
Живой стандарт |
Совместимость
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-dataand send us a pull request.
В браузерах на основе WebKit и Blink реализован устаревший и нестандартный метод ctx.setFillColor()
в дополнение к этому.
Особенности WebKit/Blink
В браузерах на базе Webkit и Blink помимо этого свойства, также поддержвается нестадартный метод ctx.setFillColor()
.
setFillColor(color, optional alpha);
setFillColor(grayLevel, optional alpha);
setFillColor(r, g, b, a);
setFillColor(c, m, y, k, a);
Смотрите также
- Canvas API
- Интерфейс предоставляющий данное свойство:
CanvasRenderingContext2D
CanvasGradient
CanvasPattern