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 Juli 2015.
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
| Specification |
|---|
| HTML # dom-context-2d-moveto-dev |
Browser-Kompatibilität
Loading…
Siehe auch
- Die Schnittstelle, die diese Methode definiert:
CanvasRenderingContext2D CanvasRenderingContext2D.lineTo()CanvasRenderingContext2D.stroke()