HTML5-Texteffekte mit Canvas und JavaScript

Mit JavaScript zum HTML5-Texteffekt

Das HTML5-Canvas-Element an sich ist zwar schnell als Tag eingebunden, macht aber leider von sich aus so gut wie nichts - außer eine Zeichenfläche für z.B. JavaScript bereit zustellen. Wie man diese statische Zeichenfläche mit animierten und interaktiven Texteffekten über JavaScript zum Leben erweckt, zeigt der australische Programmierer Tim Holman in seinem Tutorial im Codrops-Blog. Tim erläutert Schritt für Schritt, was man in JavaScript zu tun hat, um erst ein Hintergrund-Canvas zu erzeugen, dann ein Banner zu zeichnen und zu guter Letzt noch Maus-Interaktion und Farben für den Hingucker-Text zu ergänzen. Ob der Browser des Betrachters HTML5 versteht, fragt Tim mit Hilfe von Modernizr ab. Unterstützt der Browser noch kein HTML5, wird zumindest ein statisches Bild anstelle des interaktiven Texteffekts angezeigt. Der Quellcode zu dem Tutorial steht als Zip-Archiv zum Download bereit, und es gibt es 4 Texteffekt-Demos, die zeigen, was alles möglich ist:

Wie ihr selbst soche Texteffekte mit dem Canvas-Element und JavaScript erstellt, könnt ihr in Tims Tutorial mit erläuterten Quellcodebeispielen genau nachlesen.

Wie findet ihr die HTML5-Texteffekte mit Canvas und JavaScript?

Weiterführende Links:

• Interactive Typography Effects with HTML5 - Codrops
• Interactive Typography Effects Demo - Codrops
• HTML5 bei t3n
• Fortgeschrittene Webtypografie mit Canvas und CSS – t3n News
• Sponsored Post: Das Canvas-Element in HTML5 – t3n News