CanvasRenderingContext2D: moveTo() 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 CanvasRenderingContext2D.moveTo() Methode der Canvas 2D API beginnt einen neuen Unterpfad an dem durch die angegebenen (x, y) Koordinaten spezifizierten Punkt.

Syntax

js
moveTo(x, y)

Parameter

x

Die x-Achsen (horizontale) Koordinate des Punkts.

y

Die y-Achsen (vertikale) Koordinate des Punkts.

Rückgabewert

Kein (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

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).

js
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

Specification
HTML Standard
# dom-context-2d-moveto-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch