HTML canvas createLinearGradient() Methode
Definition und Verwendung
createLinearGradient() Methode, um lineare Verlaufsobjekte zu erstellen.
Die Verlaufsfarbe kann zum Füllen von Rechtecken, Kreisen, Linien, Texten und vielem mehr verwendet werden.
Hinweis:Verwenden Sie dieses Objekt als strokeStyle oder fillStyle Wert der Eigenschaft.
Hinweis:Verwenden Sie addColorStop() Die Methode definiert verschiedene Farben und gibt an, wo die Farben im Gradientenobjekt positioniert sind.
Beispiel
Weitere Informationen:
Definieren Sie eine vom Schwarz zum Weiß laufende Verlaufsfarbe (von links nach rechts) als Füllstil für das Rechteck:
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);
Syntax
context.createLinearGradient(x0,y0,x1,y1);
Parameterwert
| Parameter | Beschreibung |
|---|---|
| x0 | x-Koordinate des Startpunkts der Verlaufsfarbe |
| y0 | y-Koordinate des Startpunkts der Verlaufsfarbe |
| x1 | x-Koordinate des Endpunkts der Verlaufsfarbe |
| y1 | y-Koordinate des Endpunkts der Verlaufsfarbe |
Mehr Beispiele
Beispiel 2
Definieren Sie eine vom Oben nach Unten laufende Verlaufsfarbe als Füllstil für das Rechteck:
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);
Beispiel 3
Definieren Sie eine vom Schwarz zum Rot und dann zum Weiß laufende Verlaufsfarbe als Füllstil für das Rechteck:
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);
Browserunterstützung
Die in der Tabelle genannten Zahlen geben die erste Browserversion an, die diese Eigenschaft vollständig unterstützt.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Anmerkung:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.
