Метод addColorStop() для Canvas

Определение и использование

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

Метод addColorStop() с createLinearGradient() или createRadialGradient() Использование вместе

Комментарий:Вы можете многократно вызывать метод addColorStop() для изменения градиента. Если вы не используете этот метод для объекта gradient, градиент будет не виден. Для видимого градиента вам нужно создать по крайней мере один цветовой маркер.

Пример

Пример 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);

Попробуйте сами

Совет:Более примеров на странице в нижней части.

Синтаксис

gradient.addColorStop(stop,color);

Значение параметра

Параметр Описание
stop Значение между 0.0 и 1.0, представляющее положение начала и конца градиента.
color Цвет CSS в конце位置的 значения.

Более примеров

Пример 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);

Попробуйте сами

Поддержка браузерами

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Комментарий:Internet Explorer 8 и более ранние версии не поддерживают элемент <canvas>.