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