Градиенты в canvas

Градиенты можно использовать для заполнения прямоугольников, кругов, линий, текста и т. д. Фигуры, которые можно рисовать в элементе <canvas>, не ограничены только однородными цветами.

Существует два метода для создания двух типов градиентов:

  • createLinearGradient(x,y,x1,y1) — создает линейный градиент
  • createRadialGradient(x,y,r,x1,y1,r1) — создает радиальный градиент

Как только у нас будет объект градиента, мы должны будем добавить две или больше цветовых остановки.

Метод addColorStop() задает цветовые остановки и их положение на шкале градиента. Положение на шкале градиента может быть любым в диапазоне от 0 до 1.

Чтобы применить градиент, передайте градиент в свойство fillStyle или strokeStyle, затем нарисуйте фигуру (прямоугольник, текст или линию).

Использование метода createLinearGradient()

Создаем линейный градиент. Заполняем градиентом прямоугольник:

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

JavaScript:


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

// Создаем градиент
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Заполняем градиентом фигуру
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Использование метода createRadialGradient()

Создаем радиальный градиент. Заполняем градиентом прямоугольник:

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

JavaScript:


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

// Создаем градиент
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Заполняем градиентом фигуру
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);