Свойство fillStyle тега HTML canvas

Руководство по canvas HTML5

Определение и использование

fillStyle Свойство fillStyle устанавливает или возвращает цвет, градиент или шаблон для заливки рисования.

Пример

Пример 1

Определение прямоугольника, заливаемого синим цветом:

Ваш браузер не поддерживает тег canvas.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle = "#0000ff";
ctx.fillRect(20, 20, 150, 100);

Попробуйте сами

Совет:Более сложные примеры предоставлены в нижней части страницы.

Грамматика

context.fillStyle =color|градиент|шаблон;

Значение свойства

Значение Описание
color Указывающий на заливку рисования Цветовые значения CSS. По умолчанию #000000.
градиент Объект градиента для заливки рисования (ЛинейныйилиРадиальный)
шаблон Объект шаблона для заливки рисования

Технические детали

По умолчанию: #000000

Более сложные примеры

Пример 2

Определение градиента сверху вниз в качестве заливки прямоугольника:

Ваш браузер не поддерживает тег canvas.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient = ctx.createLinearGradient(0, 0, 0, 170);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);

Попробуйте сами

Пример 3

Определение градиента слева направо в качестве заливки прямоугольника:

Ваш браузер не поддерживает тег canvas.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient = ctx.createLinearGradient(0, 0, 170, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);

Попробуйте сами

Пример 4

Определение градиента от черного к красному к белому в качестве заливки прямоугольника:

Ваш браузер не поддерживает тег canvas.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient = ctx.createLinearGradient(0, 0, 170, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(0.5, "red");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);

Попробуйте сами

Пример 5

Используемые изображения:

лампа

Использование изображений для заполнения рисования:

Ваш браузер не поддерживает тег HTML5 canvas.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

Попробуйте сами

Поддержка браузеров

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Внимание:Internet Explorer 8 и более ранние версии не поддерживают элемент <canvas>.

Руководство по canvas HTML5