Metoda addColorStop() Canvas
Definicja i użycie
addColorStop() Metoda określa kolory i pozycje w obiekcie gradient.
Metoda addColorStop() razem z createLinearGradient() lub createRadialGradient() Razem.
Komentarz:Możesz wielokrotnie wywołać metodę addColorStop() aby zmienić gradient. Jeśli nie użyjesz tej metody na obiekcie gradient, gradient będzie niewidoczny. Aby uzyskać widoczny gradient, musisz utworzyć co najmniej jeden stop.
Przykład
Przykład 1
Zdefiniuj gradient od czarnego do białego jako styl wypełnienia prostokąta:
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);
Wskazówka:Więcej przykładów znajduje się na dole strony.
Gramatyka
gradient.addColorStop(stop,color);
Wartości parametrów
| Parametry | Opis |
|---|---|
| stop | Wartość między 0.0 a 1.0, wskazująca pozycję początkową i końcową gradientu. |
| color | Wartość koloru CSS w pozycji końcowej. |
Więcej przykładów
Przykład 2
Definiowanie gradientu za pomocą wielu metod 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);
Obsługa przeglądarki
Liczby w tabeli wskazują na wersję przeglądarki, która w pełni obsługuje tę właściwość.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Komentarz:Internet Explorer 8 i wcześniejsze wersje nie obsługuje elementu <canvas>.
