Градиенты можно использовать для заполнения прямоугольников, кругов, линий, текста и т. д. Фигуры, которые можно рисовать в элементе <canvas>, не ограничены только однородными цветами.
Существует два метода для создания двух типов градиентов:
- createLinearGradient(x,y,x1,y1) — создает линейный градиент
- createRadialGradient(x,y,r,x1,y1,r1) — создает радиальный градиент
Как только у нас будет объект градиента, мы должны будем добавить две или больше цветовых остановки.
Метод addColorStop() задает цветовые остановки и их положение на шкале градиента. Положение на шкале градиента может быть любым в диапазоне от 0 до 1.
Чтобы применить градиент, передайте градиент в свойство fillStyle или strokeStyle, затем нарисуйте фигуру (прямоугольник, текст или линию).
Использование метода createLinearGradient()
Создаем линейный градиент. Заполняем градиентом прямоугольник:
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()
Создаем радиальный градиент. Заполняем градиентом прямоугольник:
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);