Javascript метод addColorStop()

Метод addColorStop() определяет цвет и позицию остановки в объекте градиента.

Метод addColorStop() используется вместе с методом createLinearGradient() или createRadialGradient().

Примечание: Вы можете вызывать метод addColorStop() любое число раз, чтобы изменять градиент. Если этот метод не используется, то градиент будет невидим. Чтобы градиент отображался, необходимо создать хотя бы одну цветовую остановку.

JavaScript синтаксис: gradient.addColorStop(позиция, цвет);

Значения параметров

Параметр Описание
позиция Значение от 0.0 до 1.0, которое представляет позицию между началом и концом градиента
цвет CSS значение цвета, отображаемого в позиции остановки

Пример №1

Определяем градиент от черного к белому, заполняющий прямоугольник:

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

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

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

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);