Przykład
Określ gradient, który przechodzi od czerni do bieli, jak styl wypełnienia dla 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); Spróbuj sam " Pomoc Browser
Liczby w tabeli określ pierwszą wersję przeglądarki, który w pełni obsługuje metodę.
| metoda | |||||
|---|---|---|---|---|---|
| addColorStop() | tak | 9,0 | tak | tak | tak |
Definicja i Wykorzystanie
addColorStop() Metoda określa kolory i położenie w obiekcie gradientu.
addColorStop() metoda jest stosowana razem z createLinearGradient() lub createRadialGradient() .
Uwaga: Można zadzwonić do addColorStop() Metoda wielokrotnie zmienić gradient.Jeśli pominąć tej metody dla obiektów gradientu, gradient nie będzie widoczny. Musisz utworzyć co najmniej jeden przystanek kolorów mieć widoczny gradient.
| Składnia JavaScript: | gradient.addColorStop(stop,color); |
|---|
wartości parametrów
| Parametr | Opis | Graj |
|---|---|---|
| stop | Wartość pomiędzy 0,0 a 1,0 reprezentującą pozycję pomiędzy początkiem i końcem w gradiencie | Graj " |
| color | Wartość koloru CSS do wyświetlania w pozycjistop | Graj " |
Więcej przykładów
Przykład
Określ gradient z wieloma addColorStop() metody:
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);
Spróbuj sam "