Метод Canvas createLinearGradient()

Руководство по 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>.

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