Canvas lineTo() Methode
Definition und Verwendung
lineTo() Eine neue Stelle hinzufügen und eine Linie vom letzten angegebenen Punkt auf der Leinwand erstellen (dieses Verfahren erstellt keine Linie).
Hinweis:Verwenden Sie stroke() Die Methode zeichnet genaue Pfade auf der Leinwand.
Beispiel
Beispiel 1
Beginnen Sie einen Pfad, bewegen Sie sich zur Position 0,0. Erstellen Sie eine Linie, die zum Punkt 300,150 führt:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
Hinweis:Mehr Beispiele am Seitenende.
Syntax
context.lineTo(x,y);
Parameterwert
| Parameter | Beschreibung |
|---|---|
| x | Die x-Koordinate des Zielorts des Pfades. |
| y | Die y-Koordinate des Zielorts des Pfades. |
Mehr Beispiele
Beispiel 2
Zeichnen Sie einen Pfad, der das Buchstabe L bildet:
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();
Browser-Unterstützung
Die in der Tabelle genannten Zahlen geben die erste Browser-Version an, die diese Eigenschaft vollständig unterstützt.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Anmerkung:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.
