HTML Referenzhandbuch

Vollständiges Verzeichnis der HTML-Tags

HTML canvas lineTo() Methode

lineTo() ist ein Canvas 2D API verwendet Methoden, um die Endpunkte der Subpfade mit den Koordinaten x, y zu verbinden (dieses Verfahren zeichnet nicht wirklich).

HTML canvas Reference Manual

Online-Beispiel

Beginnen Sie einen Pfad und bewegen Sie sich zur Position 0,0. Erstellen Sie eine Verbindung zur Position 300,150 eines Linien:

示例

<!DOCTYPE　html>
<html>
<head>
<meta charset="utf-8>
<title>Usage of HTML canvas lineTo() method-Basic Tutorial(oldtoolbag.com)</title>/<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(0,0);
ctx.lineTo(300,150);
ctx.stroke();
</script>
</body>
</html>

Test and see ‹/›

Browserkompatibilität

IEFirefoxOperaChromeSafari

Internet Explorer 9und Firefox, Opera, Chrome und Safari unterstützen lineTo() Methoden.

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

Definition und Verwendung

Die lineTo() Methode fügt einen neuen Punkt hinzu und erstellt eine Linie von diesem Punkt zur zuletzt angegebenen Position auf der Leinwand (dieses Verfahren erstellt keine Linie).

Hinweis:Verwenden Sie stroke() Methoden zeichnen exakte Pfade auf der Leinwand.

JavaScript-Syntax:	context.lineTo(x,y);

Parameterwert

Parameter	Beschreibung
x	X-Koordinate des Zielpunkts des Pfades.
y	Y-Koordinate des Zielpunkts des Pfades.

Online-Beispiel

Zeichnen Sie einen Pfad, der die Form des Buchstaben L hat:

示例

<!DOCTYPE　html>
<html>
<head>
<meta charset="utf-8>
<title>Usage of HTML canvas lineTo() method-Basic Tutorial(oldtoolbag.com)</title>/<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.stroke();
</script>
</body>
</html>

Test and see ‹/›

HTML canvas Reference Manual

HTML: <template> Tag