Метод HTML canvas 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);
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, полностью поддерживающую метод.
| Method | |||||
|---|---|---|---|---|---|
| addColorStop() | Yes | 9.0 | Yes | Yes | Yes |
Определение и использование
Метод addColorStop() указывает цвета и положение в объекте градиента.
Метод addColorStop() используется вместе с createLinearGradient() или createRadialGradient() .
Примечание. Вы можете вызывать метод addColorStop() несколько раз, чтобы изменить градиент. Если вы пропустите этот метод для объектов градиента, градиент не будет виден. Вам нужно создать по крайней мере одну точку цвета, чтобы иметь видимый градиент.
| Синтаксис JavaScript: | градиент .addColorStop( остановка , цвет ); |
|---|
Значения параметров
| Parameter | Description | Play it |
|---|---|---|
| stop | A value between 0.0 and 1.0 that represents the position between start and end in a gradient | |
| color | A CSS color value to display at the stop position |
Дополнительные примеры
Пример
Определите градиент с помощью нескольких методов 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