Последние учебники веб-разработки
 

HTML Холст Градиенты


Холст - Градиенты

Градиенты могут быть использованы для заполнения прямоугольники, круги, линии, текст и т.д. Формы на холсте не ограничены сплошным цветом.

Есть два различных типа градиентов:

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

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

addColorStop() метод определяет цвет стопы, и его положение вдоль градиента. Градиентные позиции могут быть в любом месте в пределах от 0 до 1.

Чтобы использовать градиент, установите свойство FillStyle или StrokeStyle градиента, а затем нарисовать фигуру (rectangle, text, or a line) .


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

пример

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

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

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() :

пример

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

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

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);
Попробуй сам "