Metoda HTML canvas createRadialGradient()
Definicja i użycie
createLinearGradient() metoda tworzy obiekt gradientu promieniowego/kolistego.
Gradient może być użyty do wypełnienia prostokątów, okręgów, linii, tekstu i wielu innych.
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
Narysuj prostokąt i wypełnij go promieniowym/kolistym gradientem:
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");
// Wypełnij gradientem
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100);
Gramatyka
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
Wartości parametrów
| Parametry | Opis |
|---|---|
| x0 | Współrzędna x początku okręgu gradientu |
| y0 | Współrzędna y początku okręgu gradientu |
| r0 | Promień początku okręgu |
| x1 | Współrzędna x zakończenia okręgu gradientu |
| y1 | Współrzędna y zakończenia okręgu gradientu |
| r1 | Promień zakończenia okręgu |
Wsparcie 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ługuje elementu <canvas>.
