Градиенты холста HTML
Холст - Градиенты
Градиенты можно использовать для заливки прямоугольников, кругов, линий, текста и т. д. Формы на холсте не ограничиваются сплошными цветами.
Существует два различных типа градиентов:
- 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");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
Использование createRadialGradient():
Пример
Создайте радиальный/круговой градиент. Залейте прямоугольник градиентом:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);