HTML - Referenzhandbuch

HTML - Tag大全

HTML canvas strokeStyle Eigenschaft

HTML画布中的strokeStyle属性用于设置笔触的颜色，渐变或图案。 Die strokeStyle-Eigenschaft im HTML-Canvas wird verwendet, um die Farbe, den Farbverlauf oder das Muster des Linienstrichs zu setzen.

HTML canvas Reference Manual

Online-Beispiel

<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-Demonstration der Verwendung der HTML canvas strokeStyle-Eigenschaft:

Beispiel

<!DOCTYPE html>
<html>
<head>
<title>Verwendung der HTML canvas strokeStyle-Eigenschaft (Grundtutorialsite oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" Höhe="150" style="Kante:1px fest definiert #d3d3d3>
Your browser does not support HTML5　canvas-Tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
canvas tag.
ctx.strokeRect(20,20,150,100);
</script>
</body>
</html>

Test it out ‹/›

ctx.strokeStyle="#FF0000";

BrowserkompatibilitätIEFirefoxOperaChrome

Hinweis: 9Safari

、Firefox、Opera、Chrome und Safari unterstützen die strokeStyle-Eigenschaft.Hinweis: 8 Internet Explorer

und frühere Versionen unterstützen den <canvas>-Element nicht.

Definition und Verwendung

Die strokeStyle-Eigenschaft setzt oder gibt die Farbe, den Farbverlauf oder das Muster für den Linienstrich zurück.	Standardwert:
#000000	JavaScript-Syntax:KontextBeschreibung.strokeStyle=gradient.strokeStyle=mustertext;

|

Attributswert	Wert
Beschreibung	Derweil weist die color CSS-Farbe). Standardwert ist #000000.
gradient	Verwendet, um ein Farbübergangsobjekt für die Füllung der Zeichnung zu erstellen (linear oder radiativ)
mustertext	Verwendet, um einen Mustertextlinienstrich zu erstellen mustertext Objekt.

Online-Beispiel

Zeichnen Sie ein Rechteck. Verwenden Sie einen Farbübergangslinienstrich:

Online-Demonstration der Verwendung der HTML canvas strokeStyle-Eigenschaft:

Beispiel

<!DOCTYPE html>
<html>
<head>
<title>Verwendung der HTML canvas strokeStyle-Eigenschaft (Grundtutorialsite oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" Höhe="150" style="Kante:1px fest definiert #d3d3d3>
Your browser does not support HTML5　canvas-Tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
//Gradient fill
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
</script>
</body>
</html>

Test it out ‹/›

Online-Beispiel

Schreiben Sie den Text "Big smile!" mit einem Farbübergangslinienstrich:

Online-Demonstration der Verwendung der HTML canvas strokeStyle-Eigenschaft:

Beispiel

<!DOCTYPE html>
<html>
<head>
<title>Verwendung der HTML canvas strokeStyle-Eigenschaft (Grundtutorialsite oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" Höhe="150" style="Kante:1px fest definiert #d3d3d3>
Your browser does not support HTML5　canvas Tag
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Verdana";
//　Create gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
//　Gradient fill
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,50);
</script>
</body>
</html>

Test it out ‹/›

HTML canvas Reference Manual

HTML: <template> Tag