CanvasRenderingContext2D: moveTo() Methode

Die CanvasRenderingContext2D.moveTo()-Methode der Canvas 2D-API beginnt einen neuen Unterpfad an dem Punkt, der durch die angegebenen (x, y)-Koordinaten spezifiziert wird.

Syntax

moveTo(x, y)

Parameter

x

Die x-Achse (horizontale) Koordinate des Punktes.

y

Die y-Achse (vertikale) Koordinate des Punktes.

Rückgabewert

Keiner (undefined).

Beispiele

Erstellen mehrerer Unterpfade

Dieses Beispiel verwendet moveTo(), um zwei Unterpfade innerhalb eines einzelnen Pfades zu erstellen. Beide Unterpfade werden dann mit einem einzigen stroke()-Aufruf gerendert.

HTML

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

JavaScript

Die erste Linie beginnt bei (50, 50) und endet bei (200, 50). Die zweite Linie beginnt bei (50, 90) und endet bei (280, 120).

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50); // Begin first sub-path
ctx.lineTo(200, 50);
ctx.moveTo(50, 90); // Begin second sub-path
ctx.lineTo(280, 120);
ctx.stroke();

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Die Schnittstelle, die diese Methode definiert: CanvasRenderingContext2D
• CanvasRenderingContext2D.lineTo()
• CanvasRenderingContext2D.stroke()