Метод HTML canvas createLinearGradient()

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

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

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

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

Совет:Используйте этот объект в качестве strokeStyle или fillStyle значение свойства.

Совет:Используйте addColorStop() Метод определяет различные цвета и положение цветов в объекте gradient.

Пример

См. также:

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

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

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);

Попробуйте сами

Синтаксис

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

Значение параметра

Параметр Описание
x0 X-координата точки начала градиента
y0 Y-координата точки начала градиента
x1 X-координата точки завершения градиента
y1 Y-координата точки завершения градиента

Более примеров

Пример 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(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Попробуйте сами

Поддержка браузеров

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Примечание:Internet Explorer 8 и более ранние версии не поддерживают элемент <canvas>.

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