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 ⁨Juli 2015⁩.

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