CanvasRenderingContext2D: closePath()-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.closePath()-Methode der Canvas 2D API versucht, eine gerade Linie vom aktuellen Punkt zum Anfang des aktuellen Unterpfads hinzuzufügen. Falls die Form bereits geschlossen ist oder nur einen Punkt hat, tut diese Funktion nichts.

Diese Methode zeichnet nichts direkt auf die Leinwand. Sie können den Pfad mit den Methoden stroke() oder fill() rendern.

Syntax

closePath()

HTML

html

<canvas id="canvas"></canvas>

JavaScript

Die Ecken 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

Nur einen Unterpfad schließen

Dieses Beispiel zeichnet ein Smiley-Gesicht, das aus drei nicht verbundenen Unterpfaden besteht.

Hinweis: Obwohl closePath() aufgerufen wird, nachdem alle Bögen erstellt wurden, wird nur der letzte Bogen (Unterpfad) geschlossen.

HTML

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();