Komplexe Grafikobjekte mit Canvas zeichnen
In der Dokumentation des W3C zum Canvas-Objekt wird zwischen einfachen grafischen Objekten, Text und komplexen grafischen Objekten unterschieden. Zu den einfachen grafischen Objekten werden nur die Rechtecke gezählt. Die komplexen grafischen Objekte sind:
- Kreisbögen, weiterlesen
- Kreise, weiterlesen
- Beziercurven, weiterlesen
- Linien, weiterlesen
- Quadratische Kurven, weiterlesen
- Rechtecke, weiterlesen
Diesen sogenannten Pfadobjekten ist gemeinsam, dass der Ablauf des JavaScript immer die gleiche Grundstruktur aufweist, nämlich:
//Pfad öffnen context.beginPath(); // dann die einzelnen Pfadanweisungen ... ... // Pfad schließen, ist optional context.closePath(); // noch Füllen, sonst ist nichts zu sehen context.fill(); // und / oder Umriss zeichnen context.stroke();
Man sieht hier, dass die Grundelemente für das Zeichnen von Pfaden in einem Canvas-Objekt die Befehle beginPath()
und closePath()
sind und dass ein Pfadobjekt mit fill()
oder stroke()
gefüllt oder als Umriss gezeichnet wird.
Weitere Einzelheiten wie das Setzen von Farben und Stilen für Linien und Füllungen sowie das kombinieren von Objekten werden auf den einzelnen Beispielseiten behandelt.