Das HTML5-Canvas Element ist eine relativ neue Technik. Und so verwundert es nicht, dass es in älteren IE Versionen nicht funktioniert. Ich bin jedoch auf eine Alternative gestoßen, die größtenteils kompatibel mit dem Canvas-Element ist.
Unter http://excanvas.sourceforge.net/ findet sich das Projekt und nennt sich: ExplorerCanvas. Im Test hat sich heraus gestellt, dass es nicht ganz so performant, wie das Original Canvas-Element ist. Dies ist jedoch verständlich, da die Funktionen nicht nativ implementiert wurden.
Einbindung
Nach dem Download (zu finden unter: http://code.google.com/p/explorercanvas/downloads/list), muss das Zip-Archiv in den gewünschten Ordner entpackt werden. Anschließend wird ein Verweis auf die soeben entpackte “excanvas.compiled.js” gesetzt. Dies sieht folgendermaßen aus:
weiterlesen…
In letzter Zeit hatte ich mal wieder viel zu tun, und so ist der Blog ein bisschen zu kurz gekommen. Ich werde mich jedoch bemühen im Jahr 2012 aktiver zu sein. Ein weiteres HTML5 Canvas-Tutorial ist in Vorbereitung und auch sonst werdet Ihr einiges im neuem Jahr zu sehen bekommen.
Als kleine Überbrückung habe ich euch ein Buch zum HTML5-Canvas Element herausgesucht, dass ich mir persönlich auch gekauft habe. Wir der Name schon vermuten lässt: “kurz und gut”, werden die wichtigsten Themen in kleinen Kapiteln vorgestellt. So ist es auch eher als Referenz zu sehen, als zum lernen. Ich habe es jedenfalls immer in Griffweite liegen.
Vor einigen Wochen hatte ich eine E-Mail im Postfach, die mich wirklich gefreut hat. Es handelt sich dabei um ein Spiel, das Gebrauch von dem HTML5 Canvas-Element macht. Der Name lautet: “Space Pirat Killer”. Programmiert wurde es von Florian Stelter. Mich haben vor Allem die technischen Details interessiert. Die E-Mail, die ich als Antwort bekommen habe, könnt ihr weiter unten einsehen.
Die Grafik ist durchaus nett anzusehen. Ihr könnt es euch ja mal anschauen 
http://stelter-media.de/space-pirat-killer/
E-Mail von Florian Stelter…
Heute bin ich mal wieder auf eine sehr interessante Html5 Canvas-Demo gestoßen. Es handelt sich dabei um einen echten NES-Emulator. Die jüngere Generation wird sich jetzt vielleicht fragen, was ist ein SNES? Da ich heute gute Laune habe, werde ich den Snes mal kurz vorstellen.
Der NES(Nintendo Entertainment System) ist eine Spielkonsole, die 1983 auf den Markt kam. Es handelt sich dabei um den direkten Vorgänger der später beliebten SNES Konsole, auf der Spiele wie z.B. Super Mario Kart oder auch Donkey Kong Country zum Leben erweckt wurden. Diese Konsole kam vor meiner Zeit auf den Markt. Aber ich erinnere mich gut an Zeiten, in denen ich Stundenlang vor dem SNES gesessen habe, nur noch ein Level, nur noch ein Endboss – ich denke die Spieler unter euch kennen das 
weiterlesen…
Ich hatte in den letzten Wochen wenig Zeit mich privat mit dem Html5 Canvas-Element zu beschäftigen. Um ehrlich zu sein, verfolgte ich andere Projekte, die mich mehr gereizt haben. In den nächsten Tagen wird es allerdings wieder ein neues Tutorial geben, das ich gerade am vorbereiten bin.
weiterlesen…
Mir ist heute aufgefallen, dass es Probleme mit den Tastatureingaben im HTML5 Canvas-Element gibt. Dafür gibt es allerdings eine einfache Lösung. Man muss dem Canvas-Element einen Tabindex geben, damit es den Focus bekommt, und somit die Tastatureingaben registrieren kann.
Hier die Schritt für Schritt Anleitung:
- Gebe deinem
<canvas> das Tabindex Attribut
- Füge ein
keypress (nicht keydown) handler zu deinem <canvas> hinzu.
In den letzten zwei Einführungen habe ich euch bereits eine Menge gezeigt. Dabei kamen die Basisfunktionen zum Zeichnen von Elementen ein bisschen zu kurz. Außer einem Rechteck gab es noch nicht viel zu sehen. Das werden wir nun nachholen: Ich werde euch zeigen, wie ein Kreis gezeichnet wird.
weiterlesen…
Bei meinem täglichen Streifzug durch das Internet, bin ich heute auf eine beeindruckende Simulation gestoßen. Es handelt sich dabei nicht um ein Spiel oder eine Anwendung, sondern eine einfache Physik-Demo…
weiterlesen…
Heute stelle ich euch eine Demo vor, die bei dem diesjährigen Javascript 1k Wettbewerb den zweiten Platz erreicht hat. Es handelt sich dabei um ein Schachspiel, das von Óscar Toledo G. entwickelt wurde. Es ist wahrhaft einen Oscar wert, was Óscar da vollbracht hat. Das gesamte Spiel hat gerade mal eine Größe von 1024 bytes (komprimiert).
weiterlesen…
Heute bin ich auf einen weiteren Klassiker gestoßen, der mithilfe des HTML5 Canvas-Elements wiederbelebt wurde. Es handelt sich dabei um das gute alte Frogger. Das Spielprinzip ist einfach: Man muss einen Frosch von der einen Straßenseite auf die andere bringen. Die Schwierigkeit besteht darin, den Frosch sicher über die Straße zu geleiten. Das Problem ist nämlich, dass die Straße gut befahren ist – wenn man nicht aufpasst wird man überfahren.
weiterlesen…
