Path2D - Objekte
April 2023
Alle Methoden sind Methoden, des Zeichenkontextes, aber die elementaren
Zeichenmethoden bearbeiten den aktuellen Pfad. Für dessen Beendigung müssen
wir auch selbst sorgen müssen, indem wir mit
beginPath() einen neuen
aktiven Pfad eröffnen.Mit dem neueren Path2D-Interface brauchen wir darum nicht mehr kümmern,
denn ein Path2D-Objekt kapselt einen Pfad. So erstellt man ein Path2D-Objekt:
let myPath = new Path2D();Das Objekt besitzt die gleichen elementaren Zeichenmethoden, wie wir sie vom Zeichenkontext zur Bearbeitung des aktiven Pfads kennen. Und so muss man, um z.B. einen Kreis zu zeichnen, nichts Neues lernen:
mypath.arc(150, 70, 36, 0, 2 * Math.PI, false);Der Pfad ist jetzt nur in diesem Objekt vollständig definiert, auf der Canvas wird (noch) nichts abgebildet. Man nun Farben und Styling im Zeichenkontext wir gewohnt einstellen.
Was ist nun noch zu tun? Eigentlich nur den Pfad in der Canvas abbilden,
mit
stroke() oder fill(). Diesen Methoden
übergibt man das Path2D-Objekt als Argument, und damit
wird der Pfad in der Canvas sichtbar. So kann man beliebige viele
Pfade als Path2D-Objekte vorbereiten und an gewünschter Stelle
im Programmablauf rendern. Hier ein Beispiel:
// Pfadobjekt erstellen und Figur zeichnen let pathOne = new Path2D(); pathOne.arc(50, 50, 36, 0, 2 * Math.PI, false); let pathTwo = new Path2D(); // zweites Pfadobjekt pathTwo.arc(150, 70, 36, 0, 2 * Math.PI, false); // ersten Pfad rendern, Stil und Farbe voreingestellt Ctx2d.fill(pathOne); Ctx2d.strokeStyle = '#00c'; // Farbe für zweiten Pfad Ctx2d.lineWidth = 3; // Liniendicke für zweiten Pfad Ctx2d.stroke(pathTwo); // zweiten Pfad rendern |
 |