HTML Referenzhandbuch

Vollständiges Verzeichnis der HTML-Tags

HTML canvas closePath() Methode

closePath() ist ein Canvas 2Das D API kehrt den Stift zurück zum Anfangspunkt des aktuellen Unterpfades. Es versucht, eine Linie von der aktuellen Position zum Ursprung zu zeichnen. Wenn das Diagramm bereits geschlossen ist oder nur ein Punkt vorhanden ist, wird keine Aktion durchgeführt.

HTML canvas Reference Manual

Online-Beispiel

Zeichnen Sie einen Pfad in Form des Buchstaben L und zeichnen Sie dann eine Linie zurück zum Ursprung:

示例

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
HTML canvas closePath() 方法使用-Basic Tutorial(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.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>

Test it out ‹/›

Browserkompatibilität

IEFirefoxOperaChromeSafari

Internet Explorer 9und Firefox, Opera, Chrome und Safari unterstützen closePath() Methode.

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

Definition und Verwendung

Die closePath() Methode erstellt einen Pfad von der aktuellen Position zum Ursprung.

Hinweis:Verwenden Sie stroke()Methode zeichnet tatsächlich den Pfad auf der Leinwand.

Hinweis:Verwenden Sie fill() Methode, um ein Bild zu füllen (Standard ist schwarz). Verwenden Sie fillStyle Eigenschaft, um eine andere Farbe zu füllen/Verlauf.

JavaScript-Syntax:	context.closePath();

Online-Beispiel

Setzen Sie Blau als Füllfarbe:

示例

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
HTML canvas closePath() 方法使用-Basic Tutorial(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.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
ctx.fillStyle="blue";
ctx.fill();
</script>
</body>
</html>

Test it out ‹/›

HTML canvas Reference Manual

HTML: <template> Tag