CanvasRenderingContext2D: beginPath()-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.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
| Spezifikation |
|---|
| HTML # dom-context-2d-beginpath-dev |
Browser-Kompatibilität
Siehe auch
- Das Interface, das diese Methode definiert:
CanvasRenderingContext2D CanvasRenderingContext2D.closePath()