Canvas createLinearGradient() Methode

Canvas-Referenzhandbuch

Definition und Verwendung

createLinearGradient() Methode zum Erstellen eines linearen Verlaufsobjekts.

Verlaufsformen können zum Füllen von Rechtecken, Kreisen, Linien, Texten und vielem mehr verwendet werden.

Hinweis:Verwenden Sie das Objekt als strokeStyle oder fillStyle Wert der Eigenschaft.

Hinweis:Verwenden Sie addColorStop() Die Methode legt verschiedene Farben fest und gibt an, wo im Gradientenobjekt die Farben positioniert sind.

Beispiel

Siehe auch:

Definieren Sie eine von Schwarz nach Weiß laufende Verlaufsform (von links nach rechts), die als Füllmuster des Rechtecks dient:

Ihr Browser unterstützt das HTML5 canvas-Tag nicht.

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

Versuchen Sie es selbst

Syntax

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

Parameterwert

Parameter Beschreibung
x0 x-Koordinate des Startpunkts der Verlaufsform.
y0 y-Koordinate des Startpunkts der Verlaufsform.
x1 x-Koordinate des Endpunkts der Verlaufsform.
y1 y-Koordinate des Endpunkts der Verlaufsform.

Mehr Beispiele

Beispiel 2

Definieren Sie ein Verlaufsband (von oben nach unten) als Füllmuster des Rechtecks:

Ihr Browser unterstützt das canvas-Tag nicht.

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

Versuchen Sie es selbst

Beispiel 3

Definieren Sie eine von Schwarz nach Rot und dann nach Weiß laufende Verlaufsform, die als Füllmuster des Rechtecks dient:

Ihr Browser unterstützt das canvas-Tag nicht.

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

Versuchen Sie es selbst

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, 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.

Canvas-Referenzhandbuch