Свойство fillStyle канвы

Руководство по Canvas

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

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|gradient|pattern;

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

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

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

Значение по умолчанию: #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