HTML canvas fillStyle-Eigenschaft

HTML5 Canvas Referenzhandbuch

Definition und Verwendung

fillStyle Attribute, die die Farbe, das Gradienten oder das Muster zum Füllen des Zeichnens festlegen oder zurückgeben.

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 finden Sie am Seitenende.

Syntax

context.fillStyle =color|gradient|pattern;

Attributwert

Wert Beschreibung
color Zeigt die Farbe des Zeichnens an CSS-Farbwerte). Standardwert ist #000000.
gradient Das Gradienten-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 eine von oben nach unten verlaufende Abtönung 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, "schwarz");
my_gradient.addColorStop(1, "weiß");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);

Versuchen Sie es selbst

Beispiel 3

Definieren Sie eine von links nach rechts verlaufende Abtönung 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, "schwarz");
my_gradient.addColorStop(1, "weiß");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);

Versuchen Sie es selbst

Beispiel 4

Definieren Sie eine Abtönung 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, "schwarz");
my_gradient.addColorStop(0.5, "rot");
my_gradient.addColorStop(1, "weiß");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);

Versuchen Sie es selbst

Beispiel 5

Verwendete Bilder:

lampe

Verwenden Sie Bilder, 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

Browserunterstützung

Die in der Tabelle angegebenen Zahlen geben die erste Version des Browsers an, die das Attribut vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

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

HTML5 Canvas Referenzhandbuch