HTML-Eigenschaft fillStyle, die den Farbverlauf oder das Muster zum Füllen des Gemäldes festlegt oder zurückgibt

Beispiel

Definieren Sie ein mit Blau gefülltes Rechteck:

JavaScript:

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

Browser Unterstützung

Internet Explorer 9, Firefox, Opera, Chrome und Safari unterstützen fillStyle Attribut.

Hinweis: Internet Explorer 8 und früher unterstützen das -Element nicht.

Definition und Verwendung

Die fillStyle-Eigenschaft legt die Farbe, den Farbverlauf oder das Muster fest oder gibt sie zurück, die zum Füllen des Gemäldes verwendet werden.

Attributwert

Weitere Beispiele

Beispiel 1

Definieren Sie einen Verlauf von oben nach unten als Füllstil des Rechtecks:

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 2

Definieren Sie den Verlauf von links nach rechts als Füllstil des Rechtecks:

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

Das obige ist der detaillierte Inhalt vonHTML-Eigenschaft fillStyle, die den Farbverlauf oder das Muster zum Füllen des Gemäldes festlegt oder zurückgibt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!