Metoda createLinearGradient() na Canvas

Podręcznik Canvas

Definicja i użycie

createLinearGradient() Metoda tworzy obiekt gradientu liniowego.

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

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

Zobacz również:

Zdefiniuj przejście od czarnego do białego (od lewej do prawej) jako styl wypełnienia prostokąta:

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

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

Gramatyka

context.createLinearGradient(x0,y0,x1,y1);

Wartość parametru

Parametry Opis
x0 Współrzędna x punktu początkowego gradientu.
y0 Współrzędna y punktu początkowego gradientu.
x1 Współrzędna x punktu końcowego gradientu.
y1 Współrzędna y punktu końcowego gradientu.

Więcej przykładów

Przykład 2

Zdefiniuj przejście (od góry do dołu) jako styl wypełnienia prostokąta:

Twoja przeglądarka nie obsługuje znacznika canvas.

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 3

Zdefiniuj przejście od czarnego do czerwonego, a następnie do białego jako styl wypełnienia prostokąta:

Twoja przeglądarka nie obsługuje znacznika canvas.

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

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

Komentarz:Internet Explorer 8 i wcześniejsze wersje nie obsługuje elementu <canvas>.

Podręcznik Canvas