Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Die Zukunft des Browsens: 10 beeindruckende Canvas-Demos

Das Canvas-Tag ist eine der Neuerungen, die mit HTML5 als fester Bestandteil von Web-Anwendungen eingeführt wurde. Das Canvas-Element ist ein Bereich mit festgeschriebener Höhe und Breite, auf dem mit JavaScript gezeichnet werden kann. Doch das Canvas-Element kann mehr als nur geometrische Formen, Bilder und Text auf eine Fläche zu zeichnen. Mit den Bordmitteln und Erweiterungen wie WebGL sind deutlich komplexere Einsatz-Szenarien möglich. 10 Beeindruckende Canvas-Demos stellen wir dir in diesem Beitrag vor.

Zen Photon Garden

zen_photon_garden_canvas

Die Zen-Proton-Garden-Demo lässt dich mit reaktiven Lichtströmen spielen. Zieh Linien mit verschiedenen Eigenschaften wie Reflektion, Transparenz und Diffusion, um die Lichtstrahlen auf dem Canvas zu beeinflussen und kreiere so einzigartige Ergebnisse, die du speichern und wieder herstellen kannst.

Zen Photon Garden

Tearable Clothing

tearable_cloth_canvas_demo

Tearable Cloth ist eine Physik-Demo, die das Ziehen, Verzerren und sogar Zerreißen eines virtuellen Stoffes simuliert. Besonders beeindruckend sind der vergleichsweise kurze Code und die extrem hohe Performance, die diese Demo liefert.

Tearable Cloth

Motion Graphic Typeface

motiongraphic_Typeface_canvas_demo

Die Motion-Graphic-Typefase-Demo zeigt beeindruckende Text-Animationen, die an Rauch-Effekte erinnern und einfach nur gut aussehen. Leider haben einige Browser größere Probleme bei der Darstellung dieser Demo. Mit dem aktuellen Chrome lief die Demo bei uns am flüssigsten.

Motion Graphic Typeface

Motion Graphic Typeface 2

motion_typo2

Diese Typographie-Animation ist noch beeindruckender als die der ersten Version. Mit einer Sammlung von verschiedensten Effekten entsteht ein Puzzle-Effekt, der nur schwer in Worte zu packen ist. Auch hier lieferte Chrome bisher die beste Performance.

Motion Graphic Typeface 2

Gesten und Reveal.js

gesten_und_reveal_js

Diese Demo zeigt in Kombination mit dem Präsentations-Framework Reveal.js und WebRTC, wie mit dem Canvas-Element eine interaktive Präsentation mit Gestensteuerung via Webcam realisiert werden kann.

Gesten und Reveal.js

Particles

particles_canvas_demo

Diese Demo animiert Farben, Position, Verbindungen und Deckkraft und erzielt einen schwer zu beschreibenden Effekt. Sinnvoll oder nicht, die Demo zeigt, wie performant mit dem Canvas-Element gearbeitet werden kann.

Particles

30,000 Particles

particle_destruction

Stichwort Performance: Diese Demo enthält 30.000 Partikel und ist mit benutzerdefinierten Explosionen und automatischer Wiederherstellung jedes einzelnen Partikels ein gutes Beispiel für Interaktivität und Programm-Logik.

30,000 Particles

HTML5 Video-Destruction

html5_video_destruction

Auch Videos können im Canvas-Element platziert werden. Die Besonderheit dieser Demo: Das Video kann auf Klick in kleine Stücke zerspringen, die während der animierten „Explosion" beziehungsweise Wiederherstellung des Videos und auch danach flüssig den Teilbereich des Videos wiedergeben können.

HTML5 Video-Destruction

Canvas Rider

canvas_rider

Das Canvas-Element ist die Zukunft des HTML5-Gaming. Der Canvas Rider ist nur eine von vielen Demos, die die Spiele-Tauglichkeit des Canvas-Elementes demonstrieren.

Canvas Rider

Epic Citadel

epic_citadel

Dass Canvas nicht nur für zwei Dimensionen geeignet ist, zeigte Mozilla in Zusammenarbeit mit Epic Games. In nur vier Tagen wurde die Unreal-Engine für den Firefox fit gemacht und zeigt, in welche Richtung Browsergaming gehen könnte.

Epic Citadel

Das Canvas-Element: Ausblick

Das Canvas-Element ist eindeutig eine Technik, die in der Zukunft des modernen Webdesigns nicht wegzudenken sein wird. Zwar ist für die Nutzung dieser Technologie deutlich mehr Wissen als nur das Coden mit JavaScript nötig und somit vorerst nicht für jeden Webworker zugänglich. Die passenden Tools und Bibliotheken für eine einfachere Realisierung von beeindruckenden Ergebnissen dürften aber nicht all zu lange auf sich warten lassen.

Weiterführende Links zum Thema „HTML5“

Bitte beachte unsere Community-Richtlinien

4 Reaktionen
Marco Willi

"Epic Citadel" erinnert mich an das Erste "Unreal" <3

Antworten
Donngal

Problem, nicht Probel.

Antworten
Donngal

@beesign:

Das Probel mit Flash und Shockwave war nicht primär die Rechenleistung, sondern dass ein Plugin benötigt wird, das im Zweifel nicht auf jedem System läuft. Der grosse Vorteil von Canvas ist doch, dass es komplett ohne Plugins auskommt.

Das sind ja alles nur Beispiele was man maximal machen kann. Wir haben Canvas schon erfolgreich bei Projekten eingesetzt, und in "normalem" Rahmen ist das deutlich angenehmer fü den User als Flash.

Antworten
beesign

Witzige Sachen - vor allem die Gardinen haben mich sehr beeindruckt. Man kann sie sogar zerreißen und die Fetzen herumwerfen...

Dennoch: Mit der "Zukunft des Browsens" hat das soviel zu tun wie ein Raketentriebwerk mit der Zukunft des Autofahrens. Alle diese Sachen gibt es schon lange auf Flash-Basis und vorher auf Shockwave-Basis. Wer jetzt kommt mit "Flash braucht so viel Rechenleistung und verschwindet daher" - mir ist jetzt das Chrome-Fenster 2x abgeschmiert; auf einem kräftigen Desktoprechner. Auf dem Handy will ich das gar nicht wissen, schmiert wahrscheinlich _gleich_ ab.

Nunja; ich will nicht ätzen: Von der Raketentechnik ist viel in Automotoren eingeflossen, es wird sicher bald auch Anwendungen geben, die man nicht mehr vermissen möchte.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.