CanvasRenderingContext2D: свойство fillStyle

Свойство CanvasRenderingContext2D.fillStyle API Canvas 2D задаёт цвет, градиент или узор для заполнения фигур. По умолчанию используется #000 (чёрный).

Одно из следующих значений:

• Строка, интерпретируемая как значение CSS <color>.
• Объект CanvasGradient (линейный или радиальный градиент).
• Объект CanvasPattern (повторяющийся узор).

В этом примере применяется синий цвет заливки к прямоугольнику.

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

Результат

В этом примере используются два for цикла для отрисовки сетки прямоугольников, каждый с разным цветом заливки. Для этого используются две переменные i и j, которые генерируют уникальный цвет RGB для каждого квадрата, изменяя только значения красного и зелёного каналов. (Синий канал имеет фиксированное значение). Изменяя каналы, можно создавать различные палитры.

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

Результат выглядит так:

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

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

• API Canvas

• Интерфейс, определяющий это свойство: CanvasRenderingContext2D

• Значения, используемые этим свойством:

  • <color> тип данных CSS
  • CanvasGradient объект
  • CanvasPattern объект