Methode closePath

Die Methode closePath schließt automatisch eine Figur, die mit der Methode lineTo gezeichnet wurde, indem sie eine gerade Linie vom Endpunkt zum Startpunkt zieht. Wenn die Figur bereits geschlossen wurde oder nur ein Punkt ist, tut die Methode nichts.

Syntax

Kontext.closePath();

Beispiel

Zeichnen wir zunächst zwei Linien, ohne sie mit closePath zu schließen:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();

Beispiel

Schließen wir nun diese beiden Linien mit closePath zu einer Figur, wodurch wir ein Dreieck erhalten:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.closePath(); // Linien zu einer Figur schließen
ctx.stroke();

Beispiel

Lassen Sie uns ein Quadrat zeichnen, indem wir die Figur mit closePath anstelle der letzten Linie schließen:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath(); // Linien zu einer Figur schließen
ctx.stroke();

Siehe auch

die Methode fill,
die die Figur mit einer bestimmten Farbe füllt