Метод addColorStop() определяет цвет и позицию остановки в объекте градиента.
Метод addColorStop() используется вместе с методом createLinearGradient() или createRadialGradient().
Примечание: Вы можете вызывать метод addColorStop() любое число раз, чтобы изменять градиент. Если этот метод не используется, то градиент будет невидим. Чтобы градиент отображался, необходимо создать хотя бы одну цветовую остановку.
JavaScript синтаксис: | gradient.addColorStop(позиция, цвет); |
Значения параметров
Параметр | Описание |
---|---|
позиция | Значение от 0.0 до 1.0, которое представляет позицию между началом и концом градиента |
цвет | CSS значение цвета, отображаемого в позиции остановки |
Пример использования
Пример №1
Определяем градиент от черного к белому, заполняющий прямоугольник:
JavaScript:
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Пример №2
Определяем градиент с несколькими методами addColorStop():
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);