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.

默认值：	#000000
JavaScript 语法：	context.fillStyle=color|gradient|pattern;

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

Wert

Beschreibung

color

Ein CSS-Farbwert, der die Füllfarbe der Zeichnung angibt. Der Standardwert ist #000000

gradient

Verlauf zum Füllen der ZeichnungObjekt

值	描述
color	指示绘图填充色的 CSS 颜色值。默认值是 #000000
gradient	用于填充绘图的渐变对象（线性或放射性）
pattern	用于填充绘图的 pattern 对象

(linear oder radioaktiv)

Muster

Musterobjekt, das zum Füllen der Zeichnung verwendet wird

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!