Metoda createRadialGradient() Canvas

Podręcznik do Canvas

Definicja i użycie

createLinearGradient() metoda tworzy obiekt gradientu radialnego/kolistego.

Gradient można używać do wypełniania prostokątów, okręgów, linii, tekstu itp.

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 gradientu.

Przykład

Narysuj prostokąt i wypełnij go gradientem radialnym/kolistym:

Twoja przeglądarka nie obsługuje etykiety HTML5 canvas.

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);

Spróbuj sam

Gramatyka

context.createRadialGradient(x0,y0,r0,x1,y1,r1);

Wartość parametru

Parametry Opis
x0 Współrzędna x początku gradientu okręgu.
y0 Współrzędna y początku gradientu okręgu.
r0 Promień początku okręgu.
x1 Współrzędna x zakończenia gradientu okręgu.
y1 Współrzędna y zakończenia gradientu okręgu.
r1 Promień zakończenia okręgu.

Obsługa przeglądarki

Liczby w tabeli wskazują na 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:Internet Explorer 8 i wcześniejsze wersje nie obsługują elementu <canvas>.

Podręcznik do Canvas