Webseiten mit dem HTML5-Element Canvas gestalten
Eines der mächtigsten HTML-Elemente, das mit dem HTML5-Standard Allgemeingut bei der Gestaltung von Webseiten werden soll ist Canvas. Der Hauptzweck dieses Elementes ist die Darstellung von Grafiken jeglicher Art. Mit dem Canvas-Element kann man beispielsweise:
- geometrische Objekte wie Punkte, Linien, Kreise und Kreisbögen zeichnen
- Bézierkurven und quadratische Kurven zeichnen
- Farbverläufe und Transparenzen darstellen
- Text in unterschiedlichen Schriftarten, Schriftgrößen und Farben ausgeben
- bereits bestehende Grafiken anzeigen und verändern
Dies geschieht allein auf der Basis des HTML-Elementes Canvas und mit Hilfe von JavaScript. Es ist nicht erforderlich, irgendwelche Zusatzsoftware oder Plug-Ins zu installieren. Einen Wermutstropfen gibt es allerdings: Während Firefox bereits seit der Version 1.5 (also seit November 2005) das Canvas-Element unterstützt, Opera seit der im Juni 2006 erschienenen Version 9 und auch alle anderen modernen Browser keine Probleme mit dem Canvas Element haben, glänzt Microsofts Flaggschiff, der Internet Explorer 8 mit einer glatten Fehlleistung. Glücklicherweise gibt es mit Excanvas eine JavaScript-Bibliothek, die wichtige Teile der Canvas-Funktion emuliert.
Auf dieser Website werden die Methoden und Attribute des Canvas-Elementes anhand von Beispielen erklärt. Daneben gibt es eine Reihe von Grundgerüsten, die einen schnellen Einstieg ermöglichen sollen, sowie zusammenfassende Übersichten zu den Methode und Attributen des Canvas-Elementes.