Перейти к содержанию

fillStyle

Свойство fillStyle устанавливает или возвращает цвет, градиент или шаблон, используемый для заливки графического объекта.

Синтаксис

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

Значения

Значение по умолчанию: #000000

цвет
CSS значение цвета заливки графической фигуры. Значение по умолчанию #000000
градиент
Объект градиента (линейного или радиального) для заполнения графической фигуры
шаблон
Объект шаблона для заполнения графической фигуры

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

Примеры

Пример 1

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

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

JavaScript:

var c = document.getElementById('myCanvas')
var ctx = c.getContext('2d')
ctx.fillStyle = '#FF0000'
ctx.fillRect(20, 20, 150, 100)

Пример 2

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

Ваш браузер не поддерживает HTML5 тег 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)

Ссылки