CanvasRenderingContext2D: closePath() 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.closePath()
Methode der Canvas 2D API versucht, eine gerade Linie vom aktuellen Punkt zum
Beginn des aktuellen Unterpfads hinzuzufügen. Wenn die Form bereits geschlossen wurde oder nur einen Punkt hat, macht diese Funktion nichts.
Diese Methode zeichnet nichts direkt auf die Leinwand. Sie können den Pfad mit den
stroke() oder
fill() Methoden rendern.
Syntax
closePath()
Parameter
Keine.
Rückgabewert
Keiner (undefined).
Beispiele
Schließen eines Dreiecks
Dieses Beispiel erstellt die ersten zwei (diagonalen) Seiten eines Dreiecks mithilfe der
lineTo() Methode. Danach wird die Basis des Dreiecks mit der
closePath() Methode erstellt, die automatisch die ersten und letzten
Punkte der Form verbindet.
HTML
<canvas id="canvas"></canvas>
JavaScript
Die Eckpunkte des Dreiecks befinden sich bei (20, 140), (120, 10) und (220, 140).
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 140); // Move pen to bottom-left corner
ctx.lineTo(120, 10); // Line to top corner
ctx.lineTo(220, 140); // Line to bottom-right corner
ctx.closePath(); // Line to bottom-left corner
ctx.stroke();
Ergebnis
Schließen nur eines Unterpfads
Dieses Beispiel zeichnet ein Smiley-Gesicht, das aus drei getrennten Unterpfaden besteht.
Hinweis:
Obwohl closePath() aufgerufen wird, nachdem alle Bögen erstellt wurden, wird nur der letzte Bogen (Unterpfad) geschlossen.
HTML
<canvas id="canvas"></canvas>
JavaScript
Die ersten zwei Bögen erstellen die Augen des Gesichts. Der letzte Bogen erstellt den Mund.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(240, 20, 40, 0, Math.PI);
ctx.moveTo(100, 20);
ctx.arc(60, 20, 40, 0, Math.PI);
ctx.moveTo(215, 80);
ctx.arc(150, 80, 65, 0, Math.PI);
ctx.closePath();
ctx.lineWidth = 6;
ctx.stroke();
Ergebnis
Spezifikationen
| Specification |
|---|
| HTML Standard # dom-context-2d-closepath-dev |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Die Schnittstelle, die diese Methode definiert:
CanvasRenderingContext2D CanvasRenderingContext2D.beginPath()