Przykład
Określ gradient (od lewej), 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 | |||||
|---|---|---|---|---|---|
| createLinearGradient() | tak | 9,0 | tak | tak | tak |
Definicja i Wykorzystanie
createLinearGradient() metoda tworzy obiekt liniowy gradient.
Gradient można wykorzystać do wypełnienia prostokąty, koła, linie tekstu itp
Wskazówka: Użyj tego obiektu jako wartość do strokeStyle lub fillStyle właściwości.
Wskazówka: Użyj addColorStop() metodę, aby określić różne kolory i gdzie ustawić kolory w obiekcie gradientu.
| Składnia JavaScript: | context.createLinearGradient(x0,y0,x1,y1); |
|---|
wartości parametrów
| Parametr | Opis |
|---|---|
| x0 | Współrzędna x punktu początkowego gradientu |
| y0 | Współrzędnej y punktu początkowego gradientu |
| x1 | Współrzędnych x punktu końcowego gradientu |
| y1 | Współrzędnej y punktu końcowego gradientu |
Więcej przykładów
Przykład
Określ gradient (od góry do dołu) jako styl wypełnienia dla 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);
Spróbuj sam " Przykład
Określ gradient, który przechodzi od czarnego do czerwonego, do białego, jak styl wypełnienia dla 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);
Spróbuj sam "