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.

Themenübersicht

Ein erstes Erstes einfaches Grundgerüst

Ein erstes einfaches Grundgerüst zum Einbau einer Canvas-Grafik.

mehr …

Ein Grundgerüst mit Benutzer-Interaktion

In bestimmten Fällen soll die Zeichnungsfläche erst dann gefüllt werden, wenn der Besucher der Webseite aktiv wird.
Hier soll gezeigt werden, wie eine Canvas-Zeichnung mit einem Button-Click gefüllt wird.

mehr …

Ein Grundgerüst einer Canvas-Animation ohne Benutzer-Aktivität

Mit Canvas kann man nicht nur statische Grafiken erstellen. Es ist auch möglich, eine Canvas-Grafik kontinuierlich zu verändern. Man spricht dann in der Regel von einer Animation. Solche Animationen werden in der Regel über einen rekursiven Funktionsaufruf erzeugt, d.h. eine Funktion die sich selbst aufruft.

mehr …

Ein Grundgerüst für die Reaktion auf Tastatureingaben

Wie bereits geschrieben ist die Nutzung des Canvas-Tags zwingend mit dem Einsatz von JavaScript verbunden.

mehr …

Grundgerüst Reaktion auf Maus-Ereignisse

Mit einem kleinen, übersichtlichen Beispiel soll verdeutlich werden, wie sich der Inhalt der Canvas-Zeichnungsfläche mit der Maus verändern lässt.

mehr …

Bilddaten mit dem imageData-Objekt abrufen, verändern und speichern

Das JavaScript-Canvas-Objekt enthält mehrere Methoden, mit denen man Bildinhalte in ihrer Gesamtheit bearbeiten kann.

mehr …

Laden einer bereits existierenden Grafikdatei

In vielen Situationen kann es sinnvoll sein, eine bereits existierende Grafik als Grundlage für weitere Bearbeitungen in ein Canvas-Objekt zu laden. Hierbei bedient man sich der Funktion drawImage(Parameterfolge).

mehr …

Speichern eines Canvas-Objektes auf der lokalen Festplatte oder auf dem Host

Beim Speichern einer Grafikdatei, die mit einem Canvas-Element erzeugt wurde in zwei Fälle zu unterscheiden:Speichern auf der lokalen Festplatte und Speichern auf dem Host

mehr …

Rechtecke mit Canvas darstellen

Rechtecke mit Canvas darstellen

Rechtecke sind die einzigen grafischen Primitivobjekte, die das Canvas-Objekt beherrscht. Alle anderen geometrischen Formen werden auf der Grundlage von Pfaden erstellt.

mehr …

Komplexe Grafikobjekte mit Canvas zeichnen

In der Dokumentation des W3C zum Canvas-Objekt wird zwischen einfachen grafischen Objekten, Text und komplexen grafischen Objekten unterschieden. Die komplexen grafischen Objekte sind Kreisbögen, Kreise, Beziercurven, Linien, und Quadratische Kurven

mehr …

Kreisförmige Objekte mit Canvas zeichnen

Kreise gehören wie Bezierkurven, Linien und quadratische Kurven zu den komplexen grafischen Objekten, die mit Hilfe der Pfadtechnik gezeichnet werden.

mehr …

Linien mit Canvas zeichnen

Auch wenn es zunächst etwas erstaunlich klingt, so gehören doch auch Linien zu den komplexen grafischen Objekten, die in einem Canvas-Objekt mit Hilfe der Pfadtechnik gezeichnet werden.

mehr …

Bezierkurven mit Canvas zeichnen

Kreise gehören wie Bezierkurven, Linien und quadratische Kurven zu den komplexen grafischen Objekten, die mit Hilfe der Pfadtechnik gezeichnet werden.

mehr …

Darstellen von Texten in einem Canvas-Objekt

In einem Canvas-Objekt kann man nicht nicht grafische Elemente im herkömmlichen Sinn oder bereits existierende Grafik-Dateien darstellen, sondern auch Text.

mehr …

Die Compositing-Attribute globalAlpha und globalCompositeOperation

Übersicht und Beispiele zu den globalen Compositing-Attributen des Canvas-Objektes

mehr …

Lineare Farbverläufe im Canvas-Element

Einfache und komplexere Grafikobjekte in einem Canvas-Element können nicht nur einfarbig in Erscheinung treten. Das Canvas-Element bietet darüber hinaus auch die Möglichkeit einer differenzierten farblichen Gestaltung mit Hilfe von Farbverläufen. Derartige Farbverläufe werden meist als Gradients / Gradienten bezeichnet.

mehr …

Radiale Farbverläufe im Canvas-Element

Einfache und komplexere Grafikobjekte in einem Canvas-Element können nicht nur einfarbig in Erscheinung treten. Das Canvas-Element bietet darüber hinaus auch die Möglichkeit einer differenzierten farblichen Gestaltung mit Hilfe von Farbverläufen. Derartige Farbverläufe werden meist als Gradients / Gradienten bezeichnet.

mehr …

Muster im Canvas-Element verwenden

Mit createPattern wird die Verwendung von Mustern in Canvas-Elementen vorbereitet

mehr …

Standardwerte der Canvas-Attribute

Wenn man mit den Methoden des Canvas-Elementes experimentiert, dann wird man häufig feststellen, dass es für alle Attribute Standardwerte gibt. Hier dazu eine Übersicht.

mehr …

Zusammenfassung aller Methoden des Canvas-Interfaces

Diese Übersicht enthält alle Methoden des 2d-Interfaces des HTML5-Canvas-Elementes mit ihrer Gruppenezugehörigkeit und und den Formaten der Rückgabewerte.

mehr …

HTML5 Canvas - Bibliotheken für das Canvas-Objekt

Durch die Arbeit am HTML5-Standard und die immer breiter werdende Unterstützung des canvas-Objektes nimmt auch die Zahl der JavaScript-Bibliotheken zu, die eine Verbesserung und Automatisierung des Zugriffs auf das Canvasobjekt zum Ziel haben.

mehr …

Links zum Thema Canvas

Linksammlung zum Thema Canvas. Webseiten mit weiterführenden Informationen zu Canvas.

mehr …

Den Inhalt der Canvas-Zeichenfläche skalieren, drehen oder in anderer Art und Weise transformieren

Den Inhalt der Canvas-Zeichenfläche skalieren, drehen oder in anderer Art und Weise transformieren.

mehr …

Quadratische Kurven mit Canvas zeichnen

Quadratische Kurven mit Canvas zeichnen

mehr …

Bogenförmige Objekte mit Canvas zeichnen

Das mit HTML5 eingeführte Element Canvas - Bogenförmige Objekte mit Canvas zeichnen

mehr …

Überlegungen zur Einbindung von Canvas-Elementen in responsive Websites

Die meisten Darstellungen zum HTML5-Canvas-Element gehen davon aus, dass das die Elemente einer Webseite eine statische Größe haben. Hier stelle ich einige Gedanken und Lösungen vor, die veränderliche Größen, z.B. im Zusammenhang mit der Gestaltung responsiver Websites, ermöglichen.

mehr …

Überlegungen zur Einbindung von Canvas-Elementen in responsive Websites

Die meisten Darstellungen zum HTML5-Canvas-Element gehen davon aus, dass das die Elemente einer Webseite eine statische Größe haben. Hier stelle ich einige Gedanken und Lösungen vor, die veränderliche Größen, z.B. im Zusammenhang mit der Gestaltung responsiver Websites, ermöglichen.

mehr …