≡

Offene und geschlossene Pfade

April 2023

Offene und geschlossene Figuren

Ein Kreis zum Beispiel ist eine geschlossene Figur, denn der erste Punkt hat dieselbe Position wie der letzte. Bilden wir mit zwei Linien ein nicht geschlossenes Dreieck, dann erhalten wir eine offene Figur.

Offene und geschlossene Figuren auch als offene und geschlossene Pfade bezeichnet. Beim geschlossenen Pfad hat der letzte Punkt dieselbe Position wir der erste, beim offenen nicht.

Ein offener Pfad

Zum Zeichnen eines offenen Dreiecks verwenden wir die Methoden moveTo(x,y) und lineTo(x,y).

Ctx2d.moveTo(30, 100);
Ctx2d.lineTo(90, 10);
Ctx2d.lineTo(150, 100);

Ctx2d.strokeStyle = 'blue';
Ctx2d.lineWidth = 3;
Ctx2d.stroke();

Figur mit closePath() schließen

Wir könnten mit einem weiteren lineTo() die fehlende Dreieckseite schließen, es geht aber auch mit der Methode closePath().

Ctx2d.moveTo(30, 100);
Ctx2d.lineTo(90, 10);
Ctx2d.lineTo(150, 100);
Ctx2d.closePath();

Ctx2d.strokeStyle = 'blue';
Ctx2d.lineWidth = 3;
Ctx2d.stroke();

Die Methode closePath() ist also eine Zeichenanweisung, die automatisch den ersten und letzten Punkt einer offenen Figur verbindet.

Der aktive Pfad wird damit nicht beendet. Wäre es so, dann hätte das Stroke-Styling und das stroke() selbst keinen Einfluss auf das Dreieck.

Methode fill() schließt auch

Auch die fill()-Methode kann bei einer offenen Figur eine geschlossene erkennen. Wir lassen das Dreieck wieder offen, stroken wie gehabt, fügen aber noch zusätzlich ein Füllen hinzu.

Ctx2d.moveTo(30, 100);
Ctx2d.lineTo(90, 10);
Ctx2d.lineTo(150, 100);

Ctx2d.strokeStyle = 'blue';
Ctx2d.lineWidth = 3;
Ctx2d.stroke(); 

Ctx2d.fillStyle = '#cc0';
Ctx2d.fill();

Automatisch wird die offene Figur wie eine geschlossene gefüllt.

Das Beispiel zu offenen und geschlossenen Figuren kann hier angeschaut werden.