CanvasRenderingContext2D.fillStyle

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Свойство 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

html
<canvas id="canvas"></canvas>

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);

Результат

Использование fillStyle в циклах for

В этом примере мы используем два цикла для рисования сетки из прямоугольников, каждый из которых будет закрашен разным цветом. Получившееся изображение должно выглядеть как на скриншоте . Здесь нет ничего сложного. Мы используем две переменные i и j, чтобы создать уникальный цвет для каждого квадрата, смешивая красный и зелёный цвета. Значение синего цвета изменяться не будет. Изменяя значения цветов, вы можете создать все цвета. Увеличив количество шагов, вы сможете создать цветовую палитру, наподобие той, которая используется в Photoshop.

js
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);
  }
}

Результат

Спецификации

Specification
HTML
# dom-context-2d-fillstyle-dev

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
fillStyle

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Смотрите также