HTML холст 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(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает этот метод.
| Метод | |||||
|---|---|---|---|---|---|
| addColorStop() | Да | 9.0 | Да | Да | Да |
Определение и использование
Метод addColorStop() определяет цвета и положение в объекте градиента.
Метод addColorStop() используется вместе с createLinearGradient() или createRadialGradient().
Примечание: Можно вызвать метод addColorStop() несколько раз для изменения градиента. Если опустить этот метод для объектов градиента, градиент не будет виден. Для отображения градиента необходимо создать по крайней мере одну остановку цвета.
| Синтаксис JavaScript: | gradient.addColorStop(stop,color); |
|---|
Другие Примеры
Пример
Определите градиент с несколькими 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);
❮ HTML Справка на полотно