CanvasRenderingContext2D: beginPath()-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.beginPath()-Methode der Canvas 2D API startet einen neuen Pfad, indem sie die Liste der Unterpfade leert. Rufen Sie diese Methode auf, wenn Sie einen neuen Pfad erstellen möchten.
Hinweis:
Um einen neuen Unterpfad zu erstellen, d.h. einen, der dem aktuellen Canvas-Zustand entspricht, können Sie CanvasRenderingContext2D.moveTo() verwenden.
Syntax
beginPath()
Parameter
Keine.
Rückgabewert
Kein Wert (undefined).
Beispiele
Erstellen von unterschiedlichen Pfaden
Dieses Beispiel erstellt zwei Pfade, von denen jeder eine einzelne Linie enthält.
HTML
<canvas id="canvas"></canvas>
JavaScript
Die beginPath()-Methode wird vor Beginn jeder Linie aufgerufen, damit sie in unterschiedlichen Farben gezeichnet werden können.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// First path
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();
// Second path
ctx.beginPath();
ctx.strokeStyle = "green";
ctx.moveTo(20, 20);
ctx.lineTo(120, 120);
ctx.stroke();
Ergebnis
Spezifikationen
| Specification |
|---|
| HTML # dom-context-2d-beginpath-dev |
Browser-Kompatibilität
Loading…
Siehe auch
- Das Interface, das diese Methode definiert:
CanvasRenderingContext2D CanvasRenderingContext2D.closePath()