HTML5 Canvas auf mobilen Geräten

Die Canvas-Technologie kann für mobile Geräte verwendet werden, entweder als Webseitenanwendungen oder als mobile Apps mit Technologien wie Apache Cordova. Sie ermöglicht die Integration von Bildern, Audio und Video, so dass die Palette der Anwendungen breit gefächert ist und von E-Learning bis hin zu Werbung und Spielen reichen kann. Da es standardmäßig vom Browser als HTML5-Standard unterstützt wird und keine externen Plugins installiert werden müssen, ist es die perfekte Wahl für alle interaktiven Anforderungen.

Die Canvas-Technologie ist ein HTML5-Element, das zum Zeichnen von Grafiken über Skripting in JavaScript verwendet werden kann. Sie ermöglicht auch das Hinzufügen von Bildern, Video und Audio sowie die Interaktion mit Ereignis-Klicks. Es gibt sie schon seit über einem Jahrzehnt, aber sie wurde erst kürzlich populär.

Warum Canvas verwenden

Im Gegensatz zu Flash und Silverlight ist Canvas ein W3C-Standard, für den Sie keine zusätzlichen Plugins installieren müssen. Es ist dasselbe wie HTML, CSS und JavaScript und wird standardmäßig im Browser ausgeführt.

• • Interaktivität. Canvas ist durch JavaScript vollständig interaktiv. Es kann auf die Aktionen eines Benutzers reagieren, indem es auf Tastatur-, Maus- oder Berührungsereignisse reagiert. Jedes auf der Leinwand gezeichnete Objekt kann animiert werden. Auch wenn es nicht das Gefühl der Nativität vermittelt, ist die allgemeine Leistung für die meisten Anwendungen und Projekte zufriedenstellend.

• • Flexibilität. Es kann Linien, Formen, Text, Bilder usw. anzeigen; auch das Hinzufügen von Video und/oder Audio ist möglich.

• Browser-/Plattformunterstützung. HTML5 Canvas wird von allen wichtigen Browsern unterstützt und kann von Desktops, Tablets und Smartphones aus aufgerufen werden - einmal erstellt, kann eine Canvas-Anwendung fast überall laufen (im Gegensatz zu Flash und Silverlight). HTML5 Canvas bietet eine hervorragende Portabilität von Desktops auf mobile Geräte. Auch wenn nicht alle Funktionen in allen Browsern implementiert sind, können Entwickler sicher sein, dass Canvas auf unbestimmte Zeit ein unterstützter Standard sein wird.

Browser Canvas unterstützt.

Ein weiterer Vorteil der Verwendung von Canvas ist, dass es von der GPU (Grafikkarte) des Geräts gerendert wird und nicht vom Prozessor. Dies ermöglicht eine Verteilung der Ressourcen im Gerät, da der Prozessor andere Aufgaben (wie Klicks, Scrollen, Tabs, DOM-Manipulation usw.) erledigen kann, während der Grafikprozessor die Objekte im Canvas rendert.

Im Gegensatz zu Elementen im DOM werden Canvas-Objekte nur dann in den Canvas gezeichnet, wenn sie im sichtbaren Bereich positioniert sind, wodurch der Canvas leicht bleibt. Normalerweise muss ein Element, selbst wenn es sich am unteren Ende einer langen Webseite befindet und der Bildlauf oben ist, immer noch als Teil der Seite geladen werden, was es schwer macht.

Eine weitere interessante Funktion ist die Möglichkeit, WebGL API zu verwenden, eine JavaScript-Bibliothek, die den Zugriff auf die GPU für die Bildverarbeitung ermöglicht und Teil des HTML5 Canvas-Elements ist. Sie bietet noch mehr Möglichkeiten und eine höhere Leistung bei Partikelsystemen, da sie das Rendering von Tausenden von Partikeln zur gleichen Zeit ermöglicht.

Canvas auf dem Handy

In letzter Zeit war die Idee, Canvas in hybriden Apps mit Cordova und Frameworks & Services wie Cocoon, Playcanvas, Babylonjs, Threejs zu verwenden, für viele Entwickler sehr attraktiv - ein Trend, der nicht auf mobile Web-Apps beschränkt ist. Es gibt viele bekannte Probleme mit älteren Android-Versionen, aber das Crosswalk-Projekt kümmert sich um diese Probleme, indem es eine einheitliche Version von WebView bereitstellt, die auf der neuesten Google Chromium-Version basiert. Wenn Sie es also auf Ihrem Gerät testen und es funktioniert, können Sie sicher sein, dass es auf allen Geräten der Benutzer funktioniert.

Sogar die React-Teams von Facebook und Flipboard haben mit der Möglichkeit experimentiert, mobile Anwendungen auf der Grundlage von Canvas zu erstellen, wie das react-canvas-Projekt zeigt. Sogar die Idee eines reaktiven DOM in ReactJS stammt aus Canvas-Konzepten: den gesamten DOM-Baum jedes Mal neu zu erstellen, wenn ein Ereignis eintritt, aber nur die Abschnitte und Knoten neu zu zeichnen, die sich geändert haben. Dies war eine revolutionäre Implementierung, im Gegensatz zu den Konzepten von AngularJs 1.x, das Variablen ständig auf Veränderungen hin beobachtet. Jetzt hat auch Angular 2.x diese Konzepte in sein Framework übernommen.

Häufigste Verwendungen

• • Spiele. Canvas ist einer der besten Kandidaten für die Produktion von 2D-Spielen, 3D-Spiele werden ebenfalls unterstützt; BabylonJs und ThreeJs sind zwei der besten Frameworks auf dem Markt.

• • Datendarstellung. Mit dem Canvas-Element, z.B. Chart.js & CanvasJs, lassen sich leicht interaktive Grafiken und Diagramme erstellen. CanvasJS behauptet zum Beispiel, 10x schneller zu sein als herkömmliche Flash- oder SVG-Bibliotheken, was zu leichtgewichtigen, reaktionsschnellen Dashboards führt.

• • Werbung. Es ist ein großartiger Ersatz für Flash-basierte Banner und Anzeigen. Ein schickes Beispiel für den Einsatz in der interaktiven Werbung ist die Präsentation des BMW i8, des Renault Espace, des Superstar-Wrestlers John Cena oder des interaktiven Videos von Just A Reflektor von Arcade Fire.

• • Bildung und Training. Mit HTML5 Canvas können Sie effektive und attraktive Lernerfahrungen produzieren, indem Sie Text, Bilder, Videos und Audio kombinieren. Canvas LSM ist ein gutes Beispiel dafür, wie man einen solchen Dienst anbieten kann.

• Bildbearbeitungsprogramme und Kunst. Es eignet sich hervorragend für die Erstellung von Online-Bildbearbeitungsprogrammen für soziale Medien oder interaktive Kunstprojekte. FabricJs, literallycanvas, miniPaint.

Weitere Beispiele und Inspirationen zu den Möglichkeiten dieser Technologie finden Sie in den Chrome-Experimenten und im Bereich Mobile .