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:

image

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


image

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


image

Wie wäre es mit einem Schatten?


image

Auch Bilder lassen sich laden:

 

image

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

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.