createLinearGradient()

Метод createLinearGradient() создает объект линейного градиента.

Градиент может использоваться для заливки прямоугольников, окружностей, линий, текста и т. д.

Примечание: Созданный объект линейного градиента используется в качестве значения свойства strokeStyle или fillStyle. Для определения различных цветов и их расположения в градиенте используется метод addColorStop().

Синтаксис

context.createLinearGradient(x0, y0, x1, y1);

Параметры

x0

Координата X начальной точки градиента

y0

Координата Y начальной точки градиента

x1

Координата X конечной точки градиента

y1

Координата Y конечной точки градиента

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

• HTML Living Standard

Примеры

Пример 1

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

JavaScript:

var c = document.getElementById('myCanvas')
var ctx = c.getContext('2d')

var grd = ctx.createLinearGradient(0, 0, 170, 0)
grd.addColorStop(0, 'black')
grd.addColorStop(1, 'white')

ctx.fillStyle = grd
ctx.fillRect(20, 20, 150, 100)

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

Пример 2

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

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)

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

Пример 3

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

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)

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

Ссылки

• Метод createLinearGradient() ^{MDN (рус.)}