createLinearGradient()¶
Метод createLinearGradient()
создает объект линейного градиента.
Градиент может использоваться для заливки прямоугольников, окружностей, линий, текста и т. д.
Примечание: Созданный объект линейного градиента используется в качестве значения свойства strokeStyle
или fillStyle
. Для определения различных цветов и их расположения в градиенте используется метод addColorStop()
.
Синтаксис¶
context.createLinearGradient(x0, y0, x1, y1);
Параметры¶
x0
- Координата X начальной точки градиента
y0
- Координата Y начальной точки градиента
x1
- Координата X конечной точки градиента
y1
- Координата Y конечной точки градиента
Спецификация¶
Примеры¶
Пример 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)
Пример 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)
Пример 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)
Ссылки¶
- Метод
createLinearGradient()
MDN (рус.)