HTML 5 und das Canvas Element

In HTML 5 gibt es einige neue Sachen, letztens hatte ich den Video-Tag vorgestellt.

Heute eine kurze Einführung zum Canvas-Element. Mit diesem ist es möglich direkt im Browser zu zeichnen, ohne Flash, ohne serverseitiges Bild erstellen.
Wofür kann man das ganze verwenden? Ein Beispiel wären Diagramme, auch Animationen sind möglich.

Fangen wir an, Kern ist das Canvas-Element:

  Ihr Browser unterstützt das Canvas-Element nicht.
	

Hier definieren wir die Höhe und Breite der Leinwand. Für nicht kompatible Browser wird ein Hinweis ausgegeben.

Das Zeichnen selbst erfolgt nun mittels Java-Script-Funktionen, beginnen wir mit einem Rechteck und einem vollständigen Beispiel:

  Ihr Browser unterstützt das Canvas-Element nicht.

Das ganze sieht dann so aus:

Unglaublich oder? Jetzt fügen wir noch einen Rahmen hinzu:

Weiter geht es, wie wäre es mit einem Kreis?

Wie wäre es mit einem Schatten?

Auch Bilder lassen sich laden:

Wie man sieht, sind recht coole Sachen mit HTML 5 möglich. Dies waren natürlich nur ein paar Beispiele. Viel Spaß beim ausprobieren.