Метод addColorStop() для Canvas
Определение и использование
addColorStop()
Метод определяет цвета и позиции в объекте gradient.
Метод addColorStop() с createLinearGradient() или createRadialGradient() Использование вместе
Комментарий:Вы можете многократно вызывать метод addColorStop() для изменения градиента. Если вы не используете этот метод для объекта gradient, градиент будет не виден. Для видимого градиента вам нужно создать по крайней мере один цветовой маркер.
Пример
Пример 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);
Совет:Более примеров на странице в нижней части.
Синтаксис
gradient.addColorStop(stop,color);
Значение параметра
Параметр | Описание |
---|---|
stop | Значение между 0.0 и 1.0, представляющее положение начала и конца градиента. |
color | Цвет CSS в конце位置的 значения. |
Более примеров
Пример 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);
Поддержка браузерами
Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Комментарий:Internet Explorer 8 и более ранние версии не поддерживают элемент <canvas>.