Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

Ниже представлен простой фрагмент кода, использующий fillStyle с цветом.

HTML

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

JavaScript

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

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

Вы можете редактировать код, представленный ниже, и сделанные вами изменения отобразятся на холсте в режиме реального времени:

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

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

var ctx = document.getElementById('canvas').getContext('2d');
for (var i=0;i<6;i++){
  for (var 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' в этой спецификации.
Живой стандарт  

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка (Да) (Да) (Да) (Да) (Да)
Возможность Android Chrome для Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка (Да) (Да) (Да) (Да) (Да) (Да)
  • В браузерах на базе Webkit и Blink помимо этого свойства, также поддержвается нестадартный метод ctx.setFillColor().
    setFillColor(color, optional alpha);
    setFillColor(grayLevel, optional alpha);
    setFillColor(r, g, b, a);
    setFillColor(c, m, y, k, a);
    

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

Метки документа и участники

Внесли вклад в эту страницу: Thud97
Обновлялась последний раз: Thud97,