Перейти к содержанию

addColorStop()

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

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

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

Синтаксис

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)
Ваш браузер не поддерживает HTML5 тег canvas.

Пример 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)
Ваш браузер не поддерживает HTML5 тег canvas.

Ссылки