Metoda HTML canvas createLinearGradient()
Definicja i użycie
createLinearGradient() Metoda tworzy obiekt gradientu liniowego.
Gradienty mogą być używane do wypełniania prostokątów, okręgów, linii, tekstu i tak dalej.
Wskazówka:Użyj tego obiektu jako strokeStyle lub fillStyle wartości atrybutu.
Wskazówka:Użyj addColorStop() Metoda określa różne kolory oraz lokalizację kolorów w obiekcie gradient.
Przykład
Zobacz również:
Zdefiniuj przejście od czarnego do białego (od lewej do prawej), 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);
Gramatyka
context.createLinearGradient(x0,y0,x1,y1);
Wartość parametru
| Parametry | Opis |
|---|---|
| x0 | Współrzędna x początkowego punktu gradientu |
| y0 | Współrzędna y początkowego punktu gradientu |
| x1 | Współrzędna x końcowego punktu gradientu |
| y1 | Współrzędna y końcowego punktu gradientu |
Więcej przykładów
Przykład 2
Zdefiniuj przejście (od góry do dołu) jako styl wypełnienia prostokąta:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
Przykład 3
Zdefiniuj przejście od czarnego do czerwonego, a następnie do białego jako styl wypełnienia prostokąta:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
Obsługa przeglądarek
Liczby w tabeli wskazują na pierwszą 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 |
Uwaga:Przeglądarki Internet Explorer 8 i wcześniejsze wersje nie obsługują elementu <canvas>.
