HTML-Canvas -lineTo()- Methode

❮ HTML-Canvas-Referenz

Beispiel

Beginnen Sie einen Pfad, bewegen Sie sich zu Position 0,0. Erstellen Sie eine Zeile zur Position 300.150:

Ihr Browser unterstützt den HTML5-Canvastag nicht.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);
ctx.stroke();

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die das Verfahren vollständig unterstützt.

Method
lineTo() Yes 9.0 Yes Yes Yes

Definition und Verwendung

Die Methode lineTo() fügt einen neuen Punkt hinzu und erstellt eine Linie ZU diesem Punkt VOM zuletzt angegebenen Punkt im Zeichenbereich (diese Methode zeichnet die Linie nicht).

Tipp: Verwenden Sie die Methode stroke() , um den Pfad tatsächlich auf der Leinwand zu zeichnen.

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

Parameterwerte

Parameter Description Play it
x The x-coordinate of where to create the line to
y The y-coordinate of where to create the line to

Mehr Beispiele

Beispiel

Zeichnen Sie einen Pfad in Form des Buchstabens L:

Ihr Browser unterstützt die HTML-Datei nicht.

JavaScript:

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


❮ HTML-Canvas-Referenz