Javascript метод createLinearGradient()

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

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

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

JavaScript синтаксис:	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);