Холст - Градиенты
Градиенты могут быть использованы для заполнения прямоугольники, круги, линии, текст и т.д. Формы на холсте не ограничены сплошным цветом.
Есть два различных типа градиентов:
- createLinearGradient ( x,y,x1,y1 ) - создает линейный градиент
- createRadialGradient ( x,y,r,x1,y1,r1 ) - создает радиальное / круговой градиент
После того, как у нас есть объект градиента, мы должны добавить два или более цвета остановки.
addColorStop() метод определяет цвет стопы, и его положение вдоль градиента. Градиентные позиции могут быть в любом месте в пределах от 0 до 1.
Чтобы использовать градиент, установите свойство FillStyle или StrokeStyle градиента, а затем нарисовать фигуру (rectangle, text, or a line) .
Использование 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); Попробуй сам "