HTML Referenzhandbuch

Vollständiges Verzeichnis der HTML-Tags

HTML canvas fillStyle-Eigenschaft

Die fillStyle()-Eigenschaft des HTML-Canvas setzt die Farbe, den Farbverlauf oder das Muster der Zeichnung. Standardwert ist #000000. <canvas>-Element ermöglicht es Ihnen, mit JavaScript auf der Webseite Grafiken zu zeichnen. Jedes Canvas hat zwei Elemente, die die Höhe und Breite des Canvas beschreiben, nämlich die Höhe und die Breite.

Online-Beispiel

Definiere eine rote Füllfarbe für das Rechteck:

JavaScript：

Beispiel

<!DOCTYPE html>
<html>
<head>
<title>Verwendung der fillStyle-Eigenschaft von HTML canvas (Grund教程网　oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas-Tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>

Test to see ‹/›

Browserkompatibilität

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome und Safari unterstützen die fillStyle-Eigenschaft.

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

Definition und Verwendung

<canvas>-Element ermöglicht es Ihnen, mit JavaScript auf der Webseite Grafiken zu zeichnen. Jedes Canvas hat zwei Elemente, die die Höhe und Breite des Canvas beschreiben, nämlich die Höhe und die Breite.

Standardwert:	#000000
JavaScript-Syntax:	context.fillStyle=color\|gradient\|pattern;

Attributwert

Wert	Beschreibung
color	weist auf die Farbe der Zeichnung hin CSS-Farbeingabe). Standardwert ist #000000。
gradient	zur Füllung der Zeichnung verwendbare Farbverlauf-Objekte (linear oder radiativ)。
pattern	zur Füllung der Zeichnung verwendbar pattern Objekt.

Mehr Beispiele

Online-Beispiel

Definiere ein Farbverlauf (von oben nach unten) als Füllmuster für das Rechteck:

JavaScript：

Beispiel

<!DOCTYPE html>
<html>
<head>
<title>Verwendung der fillStyle-Eigenschaft von HTML canvas (Grund教程网　oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas-Tag.</canvas>
<script>
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);
</script>
<p>Hinweis: Internet Explorer　8und frühere Versionen unterstützen das canvas-Tag nicht.</p>
</body>
</html>

Test to see ‹/›

Online-Beispiel

Definieren Sie eine links-seitige Abtönung als Füllstil für das Rechteck:

JavaScript：

Beispiel

<!DOCTYPE html>
<html>
<head>
<title>Verwendung der fillStyle-Eigenschaft von HTML canvas (Grund教程网　oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas-Tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0,　170, 0);
grd.addColorStop(0, "black");
grd.addColorStop(0.5, "red");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(20,　20,　150,　100);
</script>
<p>Hinweis: Internet Explorer　8und frühere Versionen unterstützen das canvas-Tag nicht.</p>
</body>
</html>

Test to see ‹/›

Online-Beispiel

Definieren Sie eine Abtönung von Schwarz nach Rot nach Weiß als Füllstil für das Rechteck:

JavaScript：

Beispiel

<!DOCTYPE html>
<html>
<head>
<title>Verwendung der fillStyle-Eigenschaft von HTML canvas (Grund教程网　oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas-Tag.</canvas>
<script>
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);
</script>
<p>Hinweis: Internet Explorer　8und frühere Versionen unterstützen das canvas-Tag nicht.</p>
</body>
</html>

Test to see ‹/›

Verwendete Bilder：

Online-Beispiel

Verwendung von Bildern zum Füllen des Zeichens:

JavaScript：

Beispiel

<!DOCTYPE html>
<html>
<head>
<title>Verwendung der fillStyle-Eigenschaft von HTML canvas (Grund教程网　oldtoolbag.com)</title>
</head>
<body>
<p>Bildanwendung:/p>
<img src="haha.gif" id="lamp">
<p>Bildschirm:/p>
<button onclick="draw(&39;repeat')">wiederholen</button>　
<button onclick="draw(&39;repeat-x')">wiederholen-x</button>　
<button onclick="draw(&39;repeat-y')">wiederholen-y</button>　
<button onclick="draw(&39;no-repeat')">nicht wiederholen</button>　　　　　
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
function draw(direction)
{
　　　　var c=document.getElementById("myCanvas");
　　　　var ctx=c.getContext("2d");
　　　　ctx.clearRect(0,0,c.width,c.height);　
　　　　var img=document.getElementById("lamp")
　　　　var pat=ctx.createPattern(img,direction);
　　　　ctx.rect(0,0,220,128);
　　　　ctx.fillStyle=pat;
　　　　ctx.fill();
}
</script>
</body>
</html>

Test to see ‹/›

HTML canvas reference manual

HTML: <template> Tag