Canvas fillStyle-Eigenschaft

Canvas-Referenzhandbuch

Definition und Verwendung

fillStyle Eigenschaftseinstellungen oder Rückgabe der Farben, Verläufe oder Muster, die für das Zeichnen verwendet werden.

Beispiel

Beispiel 1

Definieren Sie ein Rechteck, das mit Blau gefüllt ist:

Ihr Browser unterstützt das canvas-Tag nicht.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);

Versuchen Sie es selbst

Tipp:Mehr Beispiele werden am Seitenende bereitgestellt.

Syntax

context.fillStyle=color|gradient|pattern;

Wert des Attributes

Wert Beschreibung
color Zeigt die Farbe der Zeichnungsfüllung an CSS-Farbe). Standardwert ist #000000.
gradient Das Gradient-Objekt zum Füllen des Zeichnens (linearoderradiant).
pattern Das Pattern-Objekt zum Füllen des Zeichnens.

Technische Details

Standardwert: #000000

Mehr Beispiele

Beispiel 2

Definieren Sie einen von oben nach unten laufenden Farbverlauf als Füllmuster für das Rechteck:

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 einen von links nach rechts laufenden Farbverlauf als Füllmuster für das Rechteck:

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(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

Versuchen Sie es selbst

Beispiel 4

Definieren Sie einen Farbverlauf von Schwarz nach Rot zu Weiß als Füllmuster für das Rechteck:

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

Beispiel 5

Verwendete Bilder:

lampe

Verwenden Sie ein Bild, um das Zeichnen zu füllen:

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

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

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

Hinweis:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.

Canvas-Referenzhandbuch