CanvasRenderingContext2D: lineTo() Methode
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 2015.
Die CanvasRenderingContext2D Methode
lineTo(), Teil der Canvas 2D API, fügt dem aktuellen Unterpfad eine gerade Linie hinzu, indem sie den letzten Punkt des Unterpfads mit den angegebenen (x, y)-Koordinaten verbindet.
Wie andere Methoden, die den aktuellen Pfad verändern, rendert diese Methode nichts direkt. Um den Pfad auf eine Leinwand zu zeichnen, können Sie die Methoden fill() oder stroke() verwenden.
Syntax
lineTo(x, y)
Parameter
Rückgabewert
Keiner (undefined).
Beispiele
Eine gerade Linie zeichnen
Dieses Beispiel zeichnet eine gerade Linie mit der lineTo() Methode.
HTML
<canvas id="canvas"></canvas>
JavaScript
Die Linie beginnt bei (30, 50) und endet bei (150, 100).
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath(); // Start a new path
ctx.moveTo(30, 50); // Move the pen to (30, 50)
ctx.lineTo(150, 100); // Draw a line to (150, 100)
ctx.stroke(); // Render the path
Ergebnis
Verbundene Linien zeichnen
Jeder Aufruf von lineTo() (und ähnlichen Methoden) wird automatisch zum aktuellen Unterpfad hinzugefügt, was bedeutet, dass alle Linien zusammen gestrichen oder gefüllt werden. Dieses Beispiel zeichnet einen Buchstaben 'M' mit einer einzigen zusammenhängenden Linie.
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(90, 130);
ctx.lineTo(95, 25);
ctx.lineTo(150, 80);
ctx.lineTo(205, 25);
ctx.lineTo(210, 130);
ctx.lineWidth = 15;
ctx.stroke();
Ergebnis
Spezifikationen
| Specification |
|---|
| HTML # dom-context-2d-lineto-dev |
Browser-Kompatibilität
Loading…
Siehe auch
- Die Schnittstelle, die diese Methode definiert:
CanvasRenderingContext2D CanvasRenderingContext2D.moveTo()CanvasRenderingContext2D.stroke()