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 July 2015.

Die Methode lineTo() der CanvasRenderingContext2D, die Teil der Canvas 2D API ist, fügt dem aktuellen Unterpfad eine gerade Linie hinzu, indem der letzte Punkt des Unterpfads mit den angegebenen (x, y)-Koordinaten verbunden wird.

Wie andere Methoden, die den aktuellen Pfad ändern, rendert diese Methode nichts direkt. Um den Pfad auf eine Leinwand zu zeichnen, können Sie die Methoden fill() oder stroke() verwenden.

Syntax

js
lineTo(x, y)

Parameter

x

Die x-Koordinate des Endpunkts der Linie.

y

Die y-Koordinate des Endpunkts der Linie.

Rückgabewert

Keine (undefined).

Beispiele

Zeichnen einer geraden Linie

Dieses Beispiel zeigt, wie man eine gerade Linie mit der Methode lineTo() zeichnet.

HTML

html
<canvas id="canvas"></canvas>

JavaScript

Die Linie beginnt bei (30, 50) und endet bei (150, 100).

js
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

Zeichnen verbundener Linien

Jeder Aufruf von lineTo() (und ähnlichen Methoden) fügt automatisch dem aktuellen Unterpfad hinzu, was bedeutet, dass alle Linien gemeinsam gestroket oder gefüllt werden. Dieses Beispiel zeichnet den Buchstaben 'M' mit einer einzigen zusammenhängenden Linie.

HTML

html
<canvas id="canvas"></canvas>

JavaScript

js
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 Standard
# dom-context-2d-lineto-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch