CanvasRenderingContext2D.fillStyle

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

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

Результат:

ScreenshotLive sample

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

Спецификация Статус Комментарий
HTML Living Standard
Определение 'CanvasRenderingContext2D.fillStyle' в этой спецификации.
Живой стандарт

Совместимость

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
fillStyleChrome Полная поддержка ДаEdge Полная поддержка 12Firefox Полная поддержка 1.5IE Полная поддержка ДаOpera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка

В браузерах на основе WebKit и Blink реализован устаревший и нестандартный метод ctx.setFillColor() в дополнение к этому.

В браузерах на базе Webkit и Blink помимо этого свойства, также поддержвается нестадартный метод ctx.setFillColor().

setFillColor(color, optional alpha);
setFillColor(grayLevel, optional alpha);
setFillColor(r, g, b, a);
setFillColor(c, m, y, k, a);

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