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

javascriptKontext.closePath();

Beispiel

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

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

javascriptlet 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:

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

javascriptlet 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:

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

javascriptlet 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