Przykład
Zdefiniować 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 " Wsparcie przeglądarka
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje metodę.
| metoda | |||||
|---|---|---|---|---|---|
| addColorStop() | 4.0 | 9.0 | 3.6 | 4.0 | 10,1 |
Definicja i Wykorzystanie
addColorStop() metody podano kolory i położenia w obiekcie gradientu.
addColorStop() sposobu stosuje się w połączeniu z createLinearGradient() lub createRadialGradient() .
Note: Możesz 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ść między 0,0 a 1,0, który reprezentuje pozycję pomiędzy początkiem i końcem w gradiencie | Graj " |
| color | Wartość koloru CSS , aby wyświetlić na stop pozycji | Graj " |
Więcej przykładów
Przykład
Określić 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 "