Przykład
Wyciągnąć prostokąta i napełnić promieniowej / okrągły gradient:
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 " Wsparcie przeglądarka
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje metodę.
| metoda | |||||
|---|---|---|---|---|---|
| createRadialGradient() | 4.0 | 9.0 | 3.6 | 4.0 | 10,1 |
Definicja i Wykorzystanie
createRadialGradient() metoda tworzy promieniowe / okrągły obiekt gradient.
Gradient mogą być użyte do wypełnienia prostokąty, koła, linie, tekst, etc.
Tip: Za pomocą tego obiektu jako wartość do strokeStyle lub fillStyle właściwości.
Tip: Za pomocą addColorStop() Metoda określania różnych barwy, i gdzie położenie barwy w obiekcie gradientu.
| Składnia JavaScript: | context . createRadialGradient( x0,y0,r0,x1,y1,r1 ) ; |
|---|
wartości parametrów
| Parametr | Opis |
|---|---|
| x0 | Współrzędnej x koła rozpoczęcia gradientu |
| y0 | Współrzędnej y koła rozpoczęcia gradientu |
| r0 | Promień okręgu wyjściowej |
| x1 | Współrzędnej x koła końcowego gradientu |
| y1 | Współrzędnej y koła końcowego gradientu |
| r1 | Promień okręgu kończącym |
<Płótno Przedmiot