Przykład
Narysuj prostokąt i napełnić promieniowej / okrężnego gradientu:
JavaScript:
var c=document.getElementById("myCanvas");
var
ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,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 | |||||
|---|---|---|---|---|---|
| createRadialGradient() | tak | 9,0 | tak | tak | tak |
Definicja i Wykorzystanie
createRadialGradient() metoda tworzy promieniową / okrągły obiekt gradientu.
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.createRadialGradient(x0,y0,r0,x1,y1,r1); |
|---|
wartości parametrów
| Parametr | Opis |
|---|---|
| x0 | Współrzędna x okręgu początkowego gradientu |
| y0 | Współrzędna y okręgu początkowego gradientu |
| r0 | Promień okręgu wyjściowej |
| x1 | Współrzędna x okręgu końcowym gradientu |
| y1 | Współrzędna y okręgu końcowym gradientu |
| r1 | Promień okręgu, kończącego |