CanvasRenderingContext2D: moveTo() Methode
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
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
js
moveTo(x, y)
Parameter
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
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
| Spezifikation |
|---|
| HTML # dom-context-2d-moveto-dev |
Browser-Kompatibilität
Siehe auch
- Die Schnittstelle, die diese Methode definiert:
CanvasRenderingContext2D CanvasRenderingContext2D.lineTo()CanvasRenderingContext2D.stroke()