Canvas im Vergleich zu Flash

1 Einleitung

1.1 HTML5 – Canvas als Alternative zu Flash

Das Flash-Plug-In von Adobe hat sich auf dem Weltmarkt etabliert und jeder weiß was es ist. So ist es heut zu Tage für jedem Browser verfügbar und bringt mit den Animationsmöglichkeiten wertvolle, dynamische Inhalte auf die Webseiten. Im Bereich der Mobilgeräte ist dies nicht der Fall, da aktuelle Smartphones und Tablet-PCs von Apple oder mit dem Google Betriebssystem Android das Plug-In nicht mehr unterstützen. Die einzige Alternative die ebenfalls solche dynamische Grafiken erstellen kann ist das neue HTML5-Canvas Element. Dabei muss auch beachtet werden, dass dadurch auch diese junge Technologie auch im Desktop-PC Bereich immer mehr Anwendung findet. Die Überzeugung in der Webentwicklergemeinde ist da noch umstritten, welche der beiden Technologien auf kurz oder lang sich durchsetzen wird. Flash ist eine alte proprietäre Technologie, wohingegen HTML5-Canvas ein offener Standard ist, der jetzt erst noch bekannt werden muss. Jede der Technologien hat seine Vor- und Nachteile, welche in dieser Arbeit noch verdeutlicht werden und warum HTML5-Canvas jetzt schon eine gute/wichtige Alternative zu Flash bildet.

1.2 Vision der animierten Buttons für Meggle Pharma

Meggle-Pharma ist einer der führenden Hersteller von pharmazeutischer Laktose weltweit. Deren internationale Serviceseite für ihre Laktose Produkte wird von der auf Webtechnologien spezialisierten Firma Allbytes entwickelt. Nun, nachdem die Seite öffentlich gemacht wurde, will Meggle ein extra Feature für ihre Hauptseite haben. Die Bereiche der Webseite sind durch Buttons, die auf der Indexseite dargestellt werden, erreichbar und eben diese sollen nun nicht nur Buttons seien, sondern interaktive Elemente. So wurde Allbytes beauftragt sich ein paar Animationen aus zu denken, welche dann den Seitenbesuchern einen visuellen aber nicht funktionalen Mehrwert bieten soll. Als wichtige Anforderung wurde hier die Kompatibilität mit mobilen Geräten wie denen von Apple oder mit dem Betriebssystem Android gesetzt, wodurch die übliche Animationstechnologie – Flash ausgeschlossen wurde. Die Alternative ist nun HTML5 – Canvas.

1.3 Ziel der Arbeit

Im Rahmen dieser Bachelorarbeit soll, anhand des Pilotprojekts Animierte-Buttons für Meggle-Pharma zu einem Reflektiert werden, wie die zwei Technologien Flash und HTML5-Canvas zueinander stehen, dabei werden Ansichten aus verschiedenen Gruppen, die auf die Technologien stoßen berücksichtigt.

• Ist CANVAS auf neuen Geräten Tablets, Smartphones benutzbar?
• Sind CANVAS-Technologien barrierefrei?
• Welche Relevanz spielen Suchmaschinen?
• Sind die Techniken einfach anzuwenden und flexibel einsetzbar?
• Benötigt man fundierte Mathematik-Kenntnisse um Animationen in Algorithmen umwandeln zu können?
• Kann auch ein Grafiker Animationen erstellen?
• Gibt es grafische Editoren, die eine CANVAS-Ausgabe erzeugen?

Auch Aspekte wie Performance und SEO sollen dabei kurz abgehandelt werden. Im Allgemeinen soll auch ein umfangreiches Grundwissen über das HTML5-Canvas Element vermittelt werden.

Im Bereich des Pilotprojekts soll eine grafisch simple Animation hergestellt werden, welche anschließend auf ihrer Webseite dargestellt werden soll. Anforderungen an das Pilotprojekt:

• Alle Elemente sollen sich je nach Auflösung der Größe anpassen
• Auch wenn die Seite schon geladen ist sollen, wenn die Seitengröße geändert wird, alle Elemente nachskalieren
• Als Fallback (sollten der Browser kein Canvas können oder das System zu wenig Leistung bzw. JavaScript deaktiviert haben) soll eine statische HTML-Seite angezeigt werden
• Die Buttonpositionen sollen gespeichert werden, sodass beim nächsten Seitenaufbau die Buttons wieder auf der letzten Position sind
• Der Hauptbutton „Products" darf sich nicht bewegen
• Beim Wegziehen der kleinen Buttons vom Großen, soll eine Verbindung wie bei Metabällen entstehen
• Setzt man den Button ab, soll sich die Verbindung zurückziehen
• Der Zieheffekt soll nur entstehen, wenn man den kleinen Button über den Großen gezogen hat
• Bewegt sich der gezogene Button zu weit von dem Hauptbutton, wird die Verbindung dünner und sie trennt sich

Eine Aussicht wird dabei auch entstehen, welche auf die bisherige Entwicklungen eingeht und eine Prognose für die Zukunft gibt.

2 Kann HTML5-Canvas mit Flash mithalten

2.1 Kriterien

In den folgenden Kapiteln wird aufgeschlüsselt, wie es um die Usability der Technologien steht. Dabei stützen sich die Tests auf den Usability Kriterien von „http://guidelines.usability.gov/" auf dieser Seite werden immer die aktuellsten Ergebnisse aus dem Bereich „Webusability" veröffentlicht. Die Bereiche der grundlegenden Designarbeiten sowie Nutzerführung werden dabei weg gelassen, da beide Technologien das Zeichnen eigener Elemente unterstützen. Somit wird bei den Nutzergruppen nur noch die „Accessibility" getestet, also wie kompatibel ist die jeweilige Technologie bei verschiedenen Browsern. Unter dieses Kriterium fallen, auch bei den Entwicklern und Grafikern, wie einfach ihnen es fällt mit dieser Technologie zu arbeiten. Hierbei wird getestet, was Flash schon inzwischen bietet und HTML5-Canvas bereits erreicht hat. Ein weiteres Kriterium ist die Geschwindigkeit der jeweiligen Technologien. Dies fällt auf der oben genannten Seite unter „Hardware and Software". In diesen Tests geht es darum, wie schnell die jeweilige Technologie neue Bilder berechnet und somit ruckelfrei dargestellt wird. Auch wird dabei gezeigt, dass die Hardware eine Rolle spielt. Es wird mit beachtet, dass auch das Laden des jeweiligen Inhalts seine Zeit benötigt. Das kann bei großen Elementen auch wichtig sein. Dadurch lässt sich folgende Checkliste erschließen:

• Browserkompatibilität
• Entwicklerunterstützung (Syntaxhighlighting, Codecompletion, IDE, Testumgebung, Debugging, Lernquellen)
• Grafikerunterstützung (Animationsbaukasten, Testumgebung, Lernquellen)
• Performance (Leistung nach Browser/System)
• Ladegeschwindigkeit (Wie schnell werden die Grafikinterfaces geladen)
• SEO – Kann die Webseite im Netz leicht gefunden werden oder auffindbar gemacht werden

Diese Punkte werden nun im Folgenden nach Nutzergruppen sortiert behandelt.

2.2 Die Nutzergruppen

2.2.1 Der Endnutzer

Jede Technologie hat auch seine Voraussetzungen so haben auch Flash und HTML5-Canvas ihre eigenen Bedingungen um den Nutzern ihren Mehrwert zu präsentieren. Im Bereich der allgemeinen Darstellung und Funktionalität sind, wie bereits erwähnt, hierbei beide Technologien gleich, da mit Beiden eine gewisse Anordnung von Webinhalten erzielt werden kann.

2.2.1.1 Flash

Bei Flash wird das Flash-Plug-In von Adobe benötigt, welches inzwischen für jeden Desktopbrowser zur Verfügung steht. Auf den mobilen Geräten wie Tablets und Handys, die IOS oder Android (ab 4.1) installiert haben existiert kein Flash Plug-In mehr.

2.2.1.2 HTML5-Canvas

HTML5-Canvas ist ein offener Standard, der vom W3C veröffentlicht wurde. Dieser kann direkt in jedem Browser dargestellt werden, welcher nach diesem aktuellen Standard entwickelt wurde. Für die Nutzer bedeutet dies, dass sie nur einen aktuellen Desktopbrowser installiert haben müssen. Bei mobilen Browsern ist dieser Standard bereits überall integriert.

Aus der nachfolgenden Tabelle wird noch einmal ersichtlich, ab wann und mit welcher Version die jeweiligen Desktopbrowser das Canvas-Element unterstützen. Da bei Flash inzwischen alle Desktopbrowser unterstützt werden, wird diese Technologie nicht aufgeführt.

2.2.2 Der Softwareentwickler

Die Systemvoraussetzungen für Softwareentwickler sind zum Ersten alle, die auch den Nutzer betreffen. Zum Zweiten wird noch eine Entwicklungsumgebung für die jeweilige Technologie benötigt. Auch die Einfachheit und Unterstützung durch Fachartikeln in Blogs sowie vorhandene Lektüren sind dabei wichtig, da sich jeder einarbeiten können muss.

2.2.2.1 Flash

Flash ist eine alte Technologie und bietet den Entwicklern in jedem gängigen Betriebssystem (Windows, OSX, Linux) eine IDE an, welche dem Entwickler viel beim Schreiben neuer Anwendungen unterstützt. Da Flash von Adobe entwickelt wird sind auch deren Hauseigenen IDEs immer aktuell. Durch das Alter gibt es auch bereits ein großes Angebot an Videotutorials und Fachartikeln von freien Entwicklern, Firmen sowie auch direkt von Adobe. Der sogenannte Actionscript-Code muss nach dem Erstellen immer neu Kompiliert werden. Daher sind keine schnellen Änderungen möglich, da die neu erstellte Datei erst wieder auf den Webserver per FTP hochgeladen werden muss. Die Anwendungen können bei den Adobe eigenen Tools direkt in der IDE getestet werden, bevor sie auf die Livewebseite geladen werden. Dabei gibt es auch Unterstützungen zum Debuggen des Codes. Auf Webseiten wird oft Interaktion zwischen den verschiedenen, auf der Seite vorhanden Elementen erwartet, jedoch erreicht Flash hier seine Grenzen. Es ist möglich andere Seiten aufzurufen, jedoch ist es von anderen Interaktionen durch seine Plug-In-Eigenschaften abgeschnitten. Die nachfolgende Grafik stellt eine Statistik dar, welche anzeigt, wie viele Browser das Flash Plug-In installiert und aktiviert haben. In diesem Fall sind es mindestens 6% die die Grafik nicht anzeigen können und noch einmal 6% die dabei hinzukommen können. Daher wichtig ist es auch immer einen Fallback zu haben, falls der Browser das Grafikelement nicht unterstützt.

2.2.2.2 HTML5-Canvas

Für HTML5-Canvas gibt es noch keine eigenständige IDE. Für die Entwicklung kann jedoch jeder beliebiger Editor genommen werden, es empfiehlt sich dabei einen zu nehmen, der JavaScript kann, da die Datenverarbeitung unter JavaScript vorgenommen wird. Gute Tools sind Programme wie Netbeans, Eclipse oder das Visual Studio von Microsoft. Diese unterstützen den Entwickler durch Syntaxhighlighting und deren Bibliothek an JavaScript Befehlen. Auch werden diese durch Updates immer aktuell gehalten und werden wohl bald auch das Canvas besser unterstützen. Ein einfacheres und kleineres Tool ist noch Notepad++, welches nur Syntaxhighlighting hat. Da es sich bei HTML5-Canvas um Skript-Code handelt, gibt es neben den genannten Lösungen auch Online-Editoren wie „http://codepen.io/", welche dem Entwickler ermöglichen das Canvas-Element direkt im Browser zu entwickeln. Der Code an sich wird in eine HTML-Datei mit eingebunden, welche das Canvas-Tag beinhaltet, das angesteuert werden soll. Das Skript kann mit einem aktuellen Browser jederzeit getestet werden, ohne Kompiliert werden zu müssen, es muss nur die HTML-Datei geöffnet werden. Damit die Entwicklung vereinfacht wird, kann der Entwickler auf Frameworks zurückgreifen, welche ihn beim Umgang mit den einzelnen Zeichenelementen unterstützen. Dabei bietet sich kinetic.js, oder auch paper.js an. Auf die einzelnen Frameworks wird in einem späteren Kapitel genauer eingegangen. Um das Element zu debuggen sind in Browsern wie Chrome und Internet Explorer bereits Webentwickler-Tools vorhanden, für Browser wie Firefox und Safari wird ein Add-On namens Firebug angeboten. Diese Webentwickler Umgebungen verhalten sich dann wie in richtigen IDEs um den Code zu debuggen. Google ist inzwischen sogar so fortschrittlich, dass man den Browser eines Android-Geräts remote debuggen kann und dadurch auch die Entwicklung von Canvas-Elementen für Mobilgeräte erleichtert wird. Im Web 2.0 ist die Interaktion der Webseiten mit dem Nutzer wichtig, so ist es auch möglich, dass Entwickler mit dem Canvas Element auch andere Elemente der Seite beeinflussen. Das beginnt bei einfachen Textinteraktionen zwischen dem Canvas und dem Rest der Webseite und geht bis hin zu ganzen DOM-Manipulationen. Bei der Entwicklung eines Canvas-Elements muss wie auch bei Flash immer eine Fallback-Lösung angeboten werden, falls der Browser des Nutzers die Grafik nicht darstellen kann. Aus der Nutzungsstatistik geht hervor, dass mindestens 10%, also mindestens jeder zehnte Nutzer, kein Canvas sehen kann und eine Alternativlösung benötigt wird.

2.2.3 Der Grafiker

Für den Grafiker gelten fast dieselben Voraussetzungen wie beim Softwareentwickler. Es werden Browser mit den entsprechenden Plug-Ins / Webstandards benötigt und das Testen läuft genauso ab. Auch die Browserkompatibilität ist für ihn wichtig, da auch seine Grafiken wie beim Softwareentwickler eine Fallbacklösung benötigen.

2.2.3.1 Flash

Flash hat wie für den Softwareentwickler auch für den Grafiker zahlreiche Tools welche unter anderem auch von Adobe direkt für alle Betriebssysteme zur Verfügung gestellt werden. Diese ermöglichen ihm durch Features wie Livevorschau oder Zusammenklicken des gewünschten Effekts eine schnelle Entwicklung neuer Animationen. Dabei kann er auch auf sogenannte „Tweens" zurückgreifen, welche ihm automatisch zeitgebundene Zustandsänderungen animieren. Zustandsänderungen können z.B. Änderungen von Position, Farbe, Größe, Form sein. Auch hat er dabei die Möglichkeit nach einer Animation anhand eines Zeitstrahls die Animationsdauer einzustellen oder anschließende Animationen ausführen zu lassen. Für einfache Slider/Banner und ähnliche einfache Seitenelemente hat der Grafiker auch fertige Templates, welche nur noch ausgewählt und konfiguriert werden müssen. Wenn es sich jedoch um speziellere Animationen handelt, muss auch dieser Fähigkeiten in der Softwareentwicklung und Mathematik haben, um diese Anforderungen umzusetzen.

2.2.3.2 HTML5-Canvas

Grafiker die mit HTML5-Canvas arbeiten bekommen auch von Adobe durch eine Erweiterung deren Flash-IDE für einfache Animationen Unterstützung. Auch Google bietet ein Tool an, welches diese Anforderungen umsetzt. Diese Umgebungen bieten jedoch nur grundlegende Animationen wie Werbebanner an. Der dadurch generierte Code ist jedoch gut geordnet und kann durch einen Kopiervorgang in die Webseite integriert werden. Dinge wie die zuvor erwähnten „Tweens" und Zeitlinien zum Erstellen von Animationen fehlen komplett. Für komplexere Animationen benötigt auch er dann Kenntnisse in der JavaScript Programmierung und fundierte Mathematikkenntnisse.

2.3 Performance

Bei dem Performancetest wird getestet, wieviel Leistung welche der Technologien benötigt. Dies ist wichtig, damit auch die Animationen die erstellt werden bei den Nutzern flüssig dargestellt werden. Laut dem Artikel „Frame Rate" von Wikipedia wird eine Bildwiederholungsrate von mindestens 25 Bildern pro Sekunde benötigt, damit das Bild auch flüssig erscheint. Neben der flüssigen Darstellung ist auch die Leistungsaufnahme wichtig, da bei einer hohen Leistungsaufnahme Akkus von Mobilgeräten sich schneller entleeren.

2.3.1 Testsetup

Um die Performance zu testen wurde folgende Spezifikation gewählt:

Hardware:

• CPU: Intel Core I5 2.4 GHz
• RAM: DDR3 667 MHz, 6 GB
• GPU: Nvidia GT540m 2 GB

Software:

• OS: Windows 8
• Mozilla Firefox 26
• Apple Safari 5.1
• Google Chrome 31.0
• Microsoft Internet Explorer 10

2.3.2 Testvorgang

Der Performancetest läuft auf 2 Internetseiten für die jeweilige Technologie:

• http://www.themaninblue.com/experiment/AnimationBenchmark/canvas/
• http://www.themaninblue.com/experiment/AnimationBenchmark/flash/

• Durch den Parameter „?particles=wert" kann die Anzahl der zu animierenden Partikel angegeben werden
• Der Test wird in 5 Partikelstufen (250, 500, 1000, 2000, 4000) mit einer Fensterauflösung von 800 × 600 Pixeln durchgeführt
• Bei den Tests werden zum Schluss die gemessenen Durchschnittswerte genommen
• Da die Browser alle in etwa das gleiche Ergebnis erzielen, wird im Folgenden nur die Grafik für den Microsoft Internet Explorer 10 dargestellt

2.3.3 Testergebnisse

Der Performancetest bringt noch einmal die Stärken und die Schwächen der jeweiligen Technologie hervor. Anhand der gewonnenen Daten sieht man, dass das Canvas-Element anfangs bei einer kleinen Partikelanzahl sehr performant ist, diese Performance fällt dafür sehr schnell ab. Der Konkurrent Flash hält sich fast konstant bei den 30 Bildern pro Sekunde. Im Gegensatz zu HTML5-Canvas benötigt die Flash-Animation viel mehr CPU-Leistung, das vor allem bei 4000 Partikeln auffällt. Es ist ersichtlich, dass Canvas durch den Browser auf ca. 27% und Flash auf ca. 60% CPU-Last limitiert ist, da ab diesen Werten kein Performancegewinn mehr erzielt wird und die Leistung zurückgeht. Dies ist jedoch nicht der einzige Grund warum die Performance so unterschiedlich ist.

2.3.4 Rendering: Flash/Canvas

Der Flashplayer ist darauf optimiert, immer nur die Bereiche neu zu rendern, die wirklich sich geändert haben. Bei Canvas hingegen wird bei jeder Änderung das komplette Element neu generiert. Dieser Vorgang ist viel rechenintensiver und kann dadurch stark die Performance der Animation beeinflussen.

2.3.5 Vektor- und Bitmap-Grafiken

Flash Player unterscheidet zwischen Vektor- und Bitmap-Grafiken und bietet für beide optimierte Rendering-Algorithmen an. Mit Canvas nutzt man Befehle um mit Vektoren zu zeichnen, jedoch werden die Zeichnungen immer auf Pixelgrafiken abgebildet.

2.3.6 Unterschiede nach Browser

Auch gibt es einen Unterschied zwischen den einzelnen Browsern. Da der Flash Player als Plug-In läuft ist bei allen Browsern die Performance gleich, jedoch gibt es bei den JavaScript Interpretern für Canvas je nach Browser Differenzen. Der Firefox und der Internet Explorer 10 haben jeweils ihre eigenen Interpreter. Chrome und Safari nutzen beide den Interpreter der Webkit-Engine, jedoch hat Apple am Safari die Befehlssätze optimiert, sodass dieser performanter als der Chrome ist. Da Flash in jedem Browser gleich arbeitet, wird dieses nur einmal zum Vergleich angezeigt. Die HTML5-Canvas Tests überschreiten die Prozessorlast von ca. 27% nicht, jedoch geht Flash bei jedem Browser auf bis zu 60% Last hoch.

2.4 Ladezeiten Flash – HTML5-Canvas

Auch die Ladezeiten der Browser sind immer wichtig, so muss der Seitencontent schnell für den Nutzer geladen und dargestellt werden. Zum Testen wurde dabei die bereits erwähnte Seite genutzt, mit der auch die Performance getestet wurde. Dabei wird jetzt die Seite einmal mit Flash und einmal mit Canvas geladen und gemessen, wie lange es dauert bis die Elemente geladen sind. Die Messung findet direkt im Browser statt. Dadurch werden sehr genaue Ergebnisse erzielt.

Durch die Messung können die Ladezeiten bestimmt werden. Betrachtet man die Codeteile, welche für das Laden des eigentlichen Inhaltes wichtig sind, unterscheiden diese sich stark. Lässt man die Grundhtmlstruktur weg, welche für die jeweiligen Dateien nur das Grundgerüst bildet in welches sie eingebaut werden, so ist das Canvas mit seinen 390 ms deutlich schneller als das Flash mit den 406 ms, zu denen noch eine zweite Datei hinzukommt, welche nochmal 31 ms zusätzlich Zeit braucht. Somit ist das Canvas um insgesamt 47 ms schneller.

2.5 Relevanz bei neuen Webseiten

Wenn es darum geht, ob man nun Flash oder Canvas auf die Seite einbindet ist es von der Nutzerstatistik egal, so haben beide Elemente einen etwa gleichgroßen Anteil an Browsern die sie unterstützen. Wenn es sich nun um eine Webseite handelt, die auch auf mobilen Geräten wie Smartphones oder Tablets dargestellt werden soll, dann ist Canvas die einzige Wahl, da Flash auf diesen nicht verfügbar ist. Auch kommt es oft vor, dass aus Sicherheitsgründen auf Firmen-PCs kein Flash Player installiert werden kann. Dann muss auch das HTML5-Canvas Element genutzt werden. Wenn jedoch auch kein Javascript dann erlaubt ist, muss auf eine normale statische Lösung zurückgegriffen werden.

Im Bereich der SEO ist HTML5-Canvas die bessere Technologie, da Crawler ohne Probleme JavaScript-Code crawlen können. So wird wichtiger Content und auch Links mit in die SEO-Score mit einbezogen, das ein besseres Ranking bei Suchmaschinen wie Google ermöglicht. Da Flash als eine Datei im SWF-Format eingebunden wird und der Flashstandard von Adobe geheim gehalten wird, kann dieser Code zwar durch Source-Reflection teilweise gecrawled werden, jedoch nicht so vollständig und deutlich wie der JavaScript-Code von dem Canvas-Element, der dem Crawler im Klartext erscheint.

2.6 Zusammenfassung

Die Gegenüberstellung der Technologien zeigt: Für Desktop-Anwendungen sind Flash und Canvas weitgehend gleichwertig in Bezug auf Browserunterstützung. Canvas hat klare Vorteile bei mobilen Geräten (Flash wird dort nicht mehr unterstützt), bei Ladezeiten (ca. 47 ms schneller) sowie bei SEO. Flash bietet aktuell noch bessere Entwicklerwerkzeuge, stabilere Performance bei komplexen Animationen und eine ausgereiftere Toolchain für Grafiker. Mit zunehmender Entwicklung der Canvas-Frameworks und Browsertechnologien schließt sich diese Lücke jedoch stetig.

3 Grundlagen zu HTML5-Canvas

3.1 Canvas in der HTML5-Struktur

Das Canvas-Element wird wie jedes andere HTML5-Element behandelt und mit seinen Tags eingebunden. Voraussetzung ist, dass das Canvas-Element in einem Dokument verschachtelt ist, das durch den Dokumententyp HTML5 definiert wird. Im Gegensatz zu früheren HTML/XHTML-Versionen wird in dem neusten Standard auf Versionsbezeichnungen und komplexe Dokumentbeschreibungen verzichtet. Das wird nun automatisch durch den Browser festgelegt. Im Bereich des Body-Tags werden die bekannten Tags genutzt. In diesem Fall ist in dem Body-Tag nur ein Canvas, welches das Canvas-Element abbildet. Dem Canvas-Element wurden Attribute für eine Breite und Höhe mitgegeben, welche als Pixel interpretiert werden. Innerhalb dem Canvas-Tag steht noch ein Text, welcher als Fallback-Content genutzt wird, falls der Browser kein Canvas unterstützt.

3.2 Das HTML5-Canvas-Element

Um mit dem Canvas-Element arbeiten zu können muss nun ein Script-Tag für den JavaScript-Code erstellt werden. Dies kann überall in dem HTML-Code liegen. Liegt es vor dem Body-Tag muss man jedoch sichergehen, dass zuerst das Canvas-Element vorhanden ist, bevor es mit dem Script-Code angesprochen wird, da es sonst zu Fehlern kommt und das Element leer bleibt. Ist der Script-Code hinter dem Canvas-Element, gibt es keine Probleme. Es wird empfohlen dem Canvas-Tag eine feste ID zu geben, damit es leichter mit JavaScript im HTML-DOM identifiziert werden kann.

Um mit dem Canvas zu arbeiten wird im JavaScript das Canvas-Element über die ID mit „document.getElementById('can')" in die Variable „canvas" gespeichert. Den Kontext des Canvas-Elements wird dann mit „canvas.getContext('2d')" in die „context"-Variable gespeichert. Über diesen Kontext wird dann später auf die Zeichen-API zugegriffen. Alternativ gibt es noch einen WebGL-Kontext, welcher für komplexe 3D-Grafiken genutzt werden kann. Dieser arbeitet dann mit der Grafikkarte über die OpenGL-Schnittstelle.

3.3 Auf das Canvas-Element zeichnen

Um auf das Canvas zu zeichnen werden mehrere Befehle benötigt. Zuerst muss das Element, das auf das Canvas zeichnen soll, bestimmt werden. Dafür stehen verschiedene Möglichkeiten zur Verfügung und jede dieser verhält sich dabei anders. Im Folgenden wird auf diese Elemente eingegangen um eine Übersicht über die Grundelemente zu bekommen. Die folgenden Elemente wurden ausgewählt, da auch Flash nur diese Grundelemente mit Actionscript3 darstellen kann.

3.3.1 Einfache Linien und Pfade zeichnen

In dem nachfolgenden Beispiel wird ein einfacher Zeichenpfad definiert, welcher aus einer Startposition, 2 normalen Linien sowie einer quadratischen Kurve und einer Bezierkurve besteht. Des Weiteren werden dem Zeichenvorgang noch weitere Darstellungseigenschaften gegeben, welche den Pfad optisch verändern.

Zu Beginn wird durch „context.beginPath()" der API der Befehl gegeben, dass nun im Folgenden ein Pfad beschrieben wird. Mit dem „context.moveTo()" wird der Startpunkt des Pfades definiert, durch den letzten Befehl „context.stroke()" wird dann der Zeichenvorgang abgeschlossen. Die 3 Möglichkeiten Pfade zu zeichnen sind „context.lineTo()", „context.quadraticCurveTo()" und „context.bezierCurveTo()". Durch die Variablen „context.lineCap", „context.lineWidth" und „context.strokeStyle" wird die Darstellung des Pfades verändert.

Die Zeichenbefehle im Detail:

• lineTo(x,y): Mit diesem Befehl wird eine Linie vom letzten Punkt aus zu den ihm mitgegebenen Koordinaten x und y gezogen.
• quadraticCurveTo(cx,cy,x,y): Mit diesem Befehl wird eine quadratische Kurve zu den Koordinaten x und y gezogen. Die Besonderheit dabei ist, dass die Linie in die Richtung von den Koordinaten cx und cy gezogen wird – dieser nennt sich Kontrollpunkt, da von ihm die Stärke der Kurve kontrolliert wird.
• bezierCurveTo(cx1,cy1,cx2,cy2,x,y): Diese Funktion verhält sich wie die „quadraticCurveTo()", jedoch werden bei dieser zwei Kontrollpunkte cx1/cy1 und cx2/cy2 definiert.

Die Darstellungsvariablen im Detail:

• lineCap: Diese Variable setzt die Endpunkte des Pfades. Mit dem Wert „round" werden diese abgerundet dargestellt. Alternativ existieren auch die Werte „butt" und „square", welche normale, eckige Enden darstellen. Als Defaultwert ist „butt" gesetzt.
• lineWidth: Hier kann die Breite des Pfades in Pixeln angegeben werden. Als Defaultwert wird „1" genutzt.
• strokeStyle: Mit dieser Variable kann die Farbdarstellung des Pfades verändert werden. Dabei können CSS3-konforme Werte sowie Farbverläufe genutzt werden.

3.3.2 Rechtecke und Kreise

Im Folgenden wird gezeigt, wie es möglich ist, einfache Rechtecke und Kreiselemente auf das Canvas zu zeichnen. Dabei wird ein Rechteck, ein Kreis sowie ein Halbkreis erstellt, um die Möglichkeiten und Funktionsweisen der Befehle zu verdeutlichen.

In dem Codebeispiel für das Rechteck wird ein einfaches Rechteck definiert. Es hat die Breite von 200 Pixeln und die Höhe von 100 Pixeln. Dabei wird es in dem oberen rechten Viertel des Canvas-Elements platziert, das durch den Befehl „rect()" des Canvas-Kontextes geschieht. Durch die Variable „fillStyle" wird dem Rechteck eine Farbe gesetzt und durch die Funktion „fill()" wird der Bereich aufgefüllt.

Der Kreis selbst wird durch die „arc()"-Funktion des Kontextes gezeichnet. Der Kreis kann auch nur zu einem bestimmten Grad gezeichnet werden; durch Setzen von „Math.PI" als Startwert wird nur ein halber Kreis gezeichnet.

Die Befehle rect() und arc() im Detail:

• rect(x,y,breite,höhe): Dabei stellen die Werte für „x" und „y" den Startpunkt dar. Das Rechteck wird dann von dort aus um die Pixelzahl der „breite" in der X-Achse gezeichnet und um den Wert der „höhe" in die Y-Achse nach unten gespannt.
• arc(x,y,radius,winkels,winkele): Dabei stehen „x" und „y" für den Kreismittelpunkt und „radius" für den Radius des Kreises. Die Werte „winkels" und „winkele" definieren den Kreisbogen. Um die Winkel besser bestimmen zu können, kann die Konstante Math.PI genutzt werden. Dabei gilt, dass PI einen halben Kreis beschreibt.

3.3.3 Farbverläufe und Bilder

Es gibt 2 verschiedene Formen von Farbverläufen: den linearen Farbverlauf und den radialen Farbverlauf. Beiden Verläufen können beliebig viele Farbstops mitgegeben werden, wobei diese jeweils mit einer Zahl kleiner 1 und einem Farbwert definiert werden. Diese Farbverläufe können, wenn sie definiert wurden, in die Variable „fillStyle" gespeichert werden.

Zuerst wird ein Rechteck definiert, welches mit dem Farbverlauf gefüllt werden soll. Danach wird der lineare Farbverlauf mit „createLinearGradient(x1,y1,x2,y2)" definiert, wobei „x1" und „y1" für den Start des Farbverlaufs und „x2" und „y2" für das Ende stehen. Mit dem Befehl „addColorStop(start,color)" werden dann die einzelnen Farbstops hinzugefügt. Der radiale Farbverlauf wird mit „createRadialGradient(x1,y1,radius1,x2,y2,radius2)" definiert.

3.3.4 Bilder in Canvas einbinden

In das Canvas-Element können auch normale Bilder in jedem üblichen Webformat („jpg", „png", „gif", „bmp") eingebunden werden. Als Quelle können eigene Bilder aus der bereits geladenen Seite per JavaScript in das Canvas geladen oder auch Bilder direkt vom eigenen oder auch externen Webserver nachgeladen werden.

Wie aus dem Code ersichtlich, wird erst ein Imageobjekt erstellt, das direkt eine onload-Funktion bekommt. Das bedeutet, sobald ein Bild in das Image-Objekt fertig reingeladen ist, wird die Funktion ausgeführt. Innerhalb der Funktion wird dann das Bild mit der Funktion „drawImage(image,x,y)" in den Canvas-Kontext geladen. Der Parameter „image" steht für das Bild, welches platziert werden soll, „x" und „y" die Position an welcher es erscheinen soll.

3.4 Animationen in Canvas

Um eine Animation mit HTML5-Canvas zu erstellen kann die „requestAnimFrame()"-Funktion genutzt werden. Diese bestimmt die optimalen FPS für den jeweiligen Browser, dadurch laufen Programme nicht viel zu schnell ab, sondern bringen eine möglichst konstante FPS-Rate.

Zuerst wird eine Variable für das Browserfenster gesetzt, das ist die windows.requestAnimFrame. Diese gibt dann je nach Browser eine Frame-Timeout-Sequenz zurück. Das ist eine Pause um die Animationen nicht zu schnell auszuführen. Sollte ein Browser nicht unterstützt werden, wird noch eine Defaultfunktion erstellt, die einen eigenen Timeout setzt. Im Callback liegt später dann die Animationsfunktion, welche immer nach diesem Timeout ausgeführt werden soll. Die selbst definierte Funktion „animate()" erstellt die neuen Bilder für die Animation. Dabei wird immer der Kontext des Canvas-Elements geladen. Dieser muss anschließend geleert werden, damit das nächste Bild erstellt werden kann. Zum Schluss wird die zuvor konfigurierte Funktion „requestAnimFrame()" mit einem Callback auf „animate()" aufgerufen.

3.4.1 Interaktion mit dem Canvas-Element

Damit das Canvas-Element auch interaktiv wird, unterstützt es verschiedene Eventlistener. Neben den Listenern, die auf Mausaktionen hören, gibt es auch den Listener, der auf Tastatureingaben reagiert.

Um dem Canvas-Element einen EventListener zu geben, muss man ihm einen mit „addEventListener()" hinzufügen. Der erste Parameter dabei ist die Aktion, auf die er lauschen soll, im Zweiten kommt eine Callback-Funktion rein, die wiederum einen Parameter „evt" bekommt. Statt „mousedown" kann auch auf andere Aktionen gehört werden:

• mousedown: Maustaste geht nach unten
• mouseup: Maustaste geht wieder nach oben
• mouseclick: Maustaste wird gedrückt (mousedown und mouseup)
• mousemove: Mauszeiger bewegt sich auf dem Canvas
• keypressed: Tastaturinteraktion, bei dieser Aktion steht dann in „evt" der Code der gedrückten Taste
• touchstart/touchend/touchmove: wie die Mouseevents nur mit Touchscreens

Der Eventlistener kann auch wieder mit „removeEventListener()" entfernt werden, falls er nicht mehr gebraucht wird.

3.5 Canvas-Frameworks und ihre Vorzüge

Wie auch in anderen Bereichen der Programmierung, gibt es auch für das HTML5-Canvas-Element einige Frameworks. Dabei hat auch jedes Framework sein spezielles Einsatzgebiet. Sie bieten einen objektorientierten Ansatz um Grafiken zu erzeugen. Des Weiteren bieten sie dem Entwickler eine schnellere Entwicklung durch vorgefertigte Funktionen, die sonst erst selbst ausprogrammiert werden müssen. Auch das Layer-System ist ein großer Vorteil, da dadurch beliebige Zeichenelemente speziell verschoben werden können, ohne dass das gesamte Canvas neu gezeichnet werden muss.

3.5.1 Kinetic.js

Kinetic ist eines der bekanntesten und ältesten Frameworks für Canvas. Es bietet einfache Grundfunktionen bis hin zu erweitertem Event-Management. So kann beim Anlegen eines neuen Elements oder Ebene durch eine Variable dieses direkt mit der Maus verschiebbar (draggable) werden. In diesem Framework existieren mehrere Unterteilungen der Ebenen:

• Stage: das ist die oberste Ebene, es ist das Canvas selbst, auf das gezeichnet wird.
• Layer: in einem Layer können verschiedene Elemente nebeneinander existieren. Diese Elemente sind z.B. Rechtecke, andere Layer, oder auch Elementgruppen, die ein Group-Element bilden.
• Group: In einer Gruppe werden Basiselemente wie Rechtecke, Kreise oder Pfade sowie andere Gruppen zusammengefasst. Wird die Gruppe verschoben oder gedreht, passiert dies mit allen Elementen.
• Shape (Rect, Circle, Path): das sind die Basiselemente, wie sie bereits im Kapitel 3.3 behandelt wurden. Jedoch werden diese über das Kinetic-Framework komfortabler durch den Entwickler angesprochen.

Auch Animationen und Eventbindungen vereinfacht das Framework durch kürzere, übersichtlichere Befehle. Mit dem „Kinetic.Animation"-Objekt kann anfangs die Animation definiert werden. Mit der Funktion „start()" wird dann erst die Animation ausgeführt. So lassen sich mehrere Animationen definieren und je nach Bedarf gestartet oder auch gestoppt werden.

3.5.2 Paper.js

PaperJS ist ein ähnliches Framework wie das KineticJS, es bietet genauso das Schichtensystem mit Layern, Gruppen und Shapes. Die Stage wurde weggelassen, da diese automatisch beim Ansprechen des Canvas-Elements definiert wird. Die Shapes lassen sich auch mit JSON beschreiben und sind dadurch leicht und schnell definiert. Jedoch haben die Elemente nach dem Anlegen komplexere Funktionen für Positionsbestimmung und Vektoroperationen integriert. Dies bietet einen großen Vorteil beim Umgang von vektorbasierten Animationen und Positionierungen. Es kann einfach für jedes erzeugte Element eine eigene Animation definiert werden, indem man die „onFrame()"-Funktion des Elements definiert.

4 Animierte Buttons für Meggle

4.1 Erste Schritte

4.1.1 Grundgerüst erstellen

Das Grundgerüst für die Animationen wird wie jede andere Webseite mit HTML und CSS beschrieben. In der HTML-Datei werden im HEAD alle benötigten Javascript und CSS-Dateien referenziert. Dabei wird das Javascript-Framework „Paperscript" reingeladen, um den Umgang mit dem Canvas zu vereinfachen. Das Framework bietet sich dabei an, da es durch die verbesserte Vektorunterstützung und vorgefertigten Vektorfunktionen sowie Objekten die Programmierarbeit erleichtert und den Programmcode übersichtlicher macht. Das Cascading-Style-Sheet setzt nur Grundformatierungen für das Canvas-Element der Animation.

Im BODY-Bereich wird für die Animation ein Canvas-Element erstellt, das zusammen mit dem Animationsskript gebündelt in einem „div" mit der ID Canvas beschrieben sind. In dem Canvas-Tag wurde die ID „can" angegeben, welche dann beim Laden des Animationsskripts als Attribut zum Referenzieren des Canvas-Elements mit „canvas=can" angegeben wird. Das „resize=true" ist auch ein Attribut, welches durch Paperscript interpretiert wird und immer dafür sorgt, dass das Canvas sich auf die volle Größe des darüberliegenden Elements erstreckt. Als Hintergrundgrafik wird eine Ellipse mit einem Farbverlauf von 2 Blautönen eingebunden.

4.1.2 Laden der Grundgrafiken im Canvas-Element

Da das Grundgerüst jetzt fertig ist, geht es nun mit der Canvasprogrammierung weiter. Zu allererst müssen die Grafiken initialisiert werden. Diese liegen in einem Ordner namens „img", der relativ zur „index.html" liegt. Um die Grafiken nun in das Canvas zu laden wird das Objekt „Raster()" genutzt, das im Konstruktor einen Bildpfad erwartet. Wird das Objekt in eine Variable gespeichert, kann es danach durch dessen interne Funktionen wie „scale()" oder „position()" manipuliert werden.

Für die Buttons werden Arrays erstellt um diese leichter handhaben zu können. Diese definieren die Bilder, Skalierungen, Positionierungen und die Verlinkungen der Elemente. Die „bubblePositions" geben die Positionen der Buttons an, ebenso geben „bubbleImages" die Bilder und „bubbleLinks" die Links an. Das Array „bubbleScales" wird benötigt, damit die Images von der Größe an die der Hauptbuttons angepasst werden. Damit später mit den Buttons gearbeitet werden kann, werden diese in ein Array namens „circlePaths" gespeichert.

4.1.3 Dynamische Positionierung bei Größenänderungen der Darstellung

Bisher werden die Grafiken nur reingeladen und noch nicht positioniert. Dies passiert dann automatisch in diesem Unterkapitel. Damit die Grafiken immer für die Nutzer im vollen Maße dargestellt werden, wurde eine extra Funktion namens „onResize()" erstellt. Diese skaliert die Bilder immer passend zur Auflösung und positioniert die Buttons auch immer passend, damit diese immer erreichbar sind und nicht aus dem Fenster verschoben werden können.

4.1.3.1 Fensterwerte holen und auswerten

Für die Anpassungen wird immer von einem FullHD-Monitor mit 1920 × 1080 Pixeln ausgegangen. Die aktuelle Auflösung des Fensters kann durch interne Variablen des Canvas-Elements aufgerufen werden. Soll nun die relative Größe des Fensters zur Grundauflösung errechnet werden, werden die jeweiligen Werte des Fensters durch die der Grundauflösung dividiert. Dadurch erhält man die Skalierung, welche auf die Elemente angewendet werden sollen.

Des Weiteren existieren noch 2 zusätzliche Canvas-globale Variablen „scale" und „wscale" um die aktuelle allgemeine Skalierung und die Breitenskalierung zu speichern. In „oldscale" wird die alte Skalierung, welche vor der Größenänderung aktuell war, zwischengespeichert. Anfangs ist „scale" mit 1 initialisiert, da dies die Grundskalierung für die FullHD-Auflösung ist. Wenn nun immer von der Grundskalierung ausgegangen werden soll, muss bei jedem Skalierungsvorgang die neue Skalierung durch die alte dividiert werden. Damit die Elemente jedoch nicht zu klein werden, soll die Größenänderung erst unter einer Skalierung von unter 70% stattfinden.

4.1.3.2 Wolke skalieren und ausrichten

Zuerst wird nun die Wolke skaliert und ausgerichtet. Diese soll immer zentriert am unteren Rand sein und die volle Breite passend ausfüllen. Die Skalierung wird mit der „scale()"-Funktion des Elements erreicht. Hierzu wird die aktuelle Breitenskalierung durch die alte Breitenskalierung geteilt. Die X-Koordinate ist der horizontale Mittelpunkt des Canvas-Elements. Die Y-Koordinate errechnet sich durch die Höhe des Canvas und der halben Höhe des Elements selbst.

4.1.3.3 Logo skalieren und ausrichten

Mit den zuvor ausgewerteten Skalierungseigenschaften wird nun das Logo nachskaliert und zentriert. Dabei erhält es einen kleinen Abstand vom oberen Rand. Hier wird wie schon bei der Wolke zu sehen war die neue Skalierung durch die alte geteilt. Bei der Y-Position wird die Logohöhe und die Höhenskalierung des Browsers genutzt um den Abstand vom oberen Rand darzustellen.

4.1.3.4 Buttons skalieren und ausrichten

Auch die Buttons werden dann skaliert und positioniert. Dabei wird mit einer for-Schleife durch die Buttonelemente iteriert. Bei der Positionierung wird die aktuelle Position, welche als Vektor zum Mittelpunkt des Canvas-Elements beschrieben wird, mit der Skalierung multipliziert. Dadurch wirkt eine Größenänderung auf den Nutzer so, als würde das Canvas rein/raus zoomen. Sollte einer der Buttons durch die Größenänderung aus dem Bildbereich verschwinden, wird dieser wieder in das Canvas geschoben.

4.1.4 Klick-/Touch-Aktionen an die Buttons binden

Für die späteren Animationen werden auch Interaktionen mit dem Canvas vorausgesetzt. Diese werden hier mit den Klick-/Touch-Aktionen der Nutzer ausgelöst. Um mit diesen arbeiten zu können werden die „onMouseDown()", „onMouseDrag()" und „onMouseUp()"-Funktionen genutzt.

4.1.4.1 Mausklick-/Touch-Aktion starten

Das Initialisieren einer Klickaktion wird mit der „onMouseDown()"-Funktion beschrieben. Bei dieser wird zuerst anhand der Mausposition geprüft, ob an dieser Stelle ein Element positioniert ist. Anschließend muss geprüft werden, ob es sich bei diesem Element um einen Button handelt, da bei dem Logo und bei der Wolke keine Aktionen ausgeführt werden sollen. Der angeklickte Button wird in eine Variable gelegt, die global innerhalb des Skriptcodes angesprochen werden kann. Ebenso wird eine Variable mit dem booleschen Wert „True" belegt, welche zum Auswerten des Klicks wichtig ist. Mit ihr wird festgestellt, ob der Button verschoben werden soll, oder angeklickt wird um den Link aufrufen zu können.

4.1.4.2 Aktion bei Mausbewegung/Touchbewegung

Die „onMouseDrag()"-Funktion wird ausgeführt, wenn sich dann anschließend die Maus bewegt. In diesem Codeteil wird zu Anfangs der Wert der Auswertungsvariablen auf „False" gesetzt, da dann angenommen werden kann, dass der Nutzer den Button verschieben will. Daraufhin wird auch die Position des Buttons mit Hilfe der internen Positionsänderungsvariablen neu gesetzt um die Verschiebung zu visualisieren. Handelt es sich jedoch um den zentralen Button soll keine Verschiebung stattfinden.

4.1.4.3 Aktion beim Beenden des Mausklicks/Touchevents

In der „onMouseUp()"-Funktion wird dann ausgewertet, ob ein Button angeklickt und verschoben oder nur angeklickt wurde. Wurde der Button angeklickt, wird der Nutzer anschließend auf die Verlinkung weitergeleitet. Ansonsten wird einfach die Variable mit dem Button geleert.

4.1.4.4 Immer die aktuellsten Positionen speichern

Damit immer die Positionierungen für die „onResize()"-Funktion gesetzt sind, wird in einer „onFrame()"-Funktion, welche bei jedem Bildwechsel ausgeführt wird, die aktuelle Position der Buttons gespeichert. Da dem Nutzer die Buttons auch beim Wiederkehren auf die Webseite so präsentiert werden sollen, wie er sie verlassen hat, werden die Positionen zusätzlich in ein Cookie gespeichert. Mit Hilfe des jQuery-Cookie-Plugins wird das Speichern und Lesen der Cookies vereinfacht. Da in Cookies keine Arrays genutzt werden können, wird mit „JSON.stringify()" bzw. „JSON.parse()" die Werte in einen String verwandelt bzw. in ein Array zurückverwandelt.

4.2 Animierter Zieheffekt zwischen den Buttons

Nun steht das HTML-Grundgerüst und die grundlegenden Funktionen um mit dem Canvas zu arbeiten sind auch fertig. Es wird das Canvas angezeigt, die Grafiken geladen und die Buttons können verschoben/angeklickt werden. Auch die Skalierung ist nun dynamisch. Da diese bisherige Funktionalität zwar gut ist, aber noch keinen großen Wiedererkennungswert liefert, soll jetzt noch eine Animation zwischen den Buttons stattfinden.

4.2.1 Problemstellung

Für diese Animation wollte Meggle einen Zieheffekt zwischen den Buttons haben. Dieser soll sich so verhalten, dass wenn mit einem der beweglichen Buttons über den Hauptbutton gefahren wird, eine Spur zwischen ihnen entsteht, die je nach Entfernung dünner wird. Zur besseren Vorstellung: Wenn ein Stück Knete auseinander gezogen wird, existiert zwischen den 2 Stücken eine Verbindung, die in die Mitte hin dünner wird und irgendwann abreißt. Ergänzend hierzu soll zeitgebunden auch die Verbindung dünner werden, wenn sich der Button nicht mehr bewegt.

4.2.2 Erster Ansatz

Durch Recherche hat sich herausgestellt, dass es sich bei diesem Effekt um die sogenannten „Metabälle" handelt. Da es Metabälle in mehreren Dimensionen gibt, handelt es sich in diesem Fall um diese in einem 2D-Kontext. Um diese grafisch darzustellen wird normalerweise ein Schatten an den Ball gelegt und mit einem Kantenfilter dargestellt. Dies simuliert das Zusammenlaufen/Entfernen von 2 Bällen. Das Problem bei dieser Methode ist jedoch, dass dieser Effekt auftritt, sobald die Kugeln sich nähern. In diesem Fall soll dies jedoch nur geschehen, wenn der eine Ball über den anderen gezogen wird, also muss eine andere Lösung her.

4.2.3 Zweiter Ansatz

4.2.3.1 Überlegung

Da der oben beschriebene Ansatz nicht funktioniert, muss die Spur zwischen den Punkten mathematisch berechnet werden. Als Ansatzpunkte für diese Grafik können die Werte der zwei Bälle genutzt werden. Für die Darstellung des Effekts wird dabei anfangs der Abstand zwischen den Bällen berechnet. Als nächstes wird der Winkel zwischen den Bällen berechnet, um die Richtung der Zeichnung zu bestimmen. Passend zu diesem Winkel werden dann vom Kreismittelpunkt aus die Winkel bestimmt, wo die Zeichnung dann ihre Ansatzpunkte erhält. Sind diese gefunden, werden je Ball die 2 Punkte am Rand berechnet, an denen dann die Zeichnung ansetzt. Anhand dieser Koordinaten und Vektoren wird ein Pfad gezeichnet, der anschließend mit einer Farbe gefüllt wird.

4.2.3.2 Vorhandenes nutzen

Dieses zuvor erwähnte Vorgehen existiert auch bereits teilweise bei einer der Demos von PaperJS. Daher wurde diese Berechnung übernommen und dann passend an die Anforderungen von Meggle verändert. In dieser Demo ist nur die Berechnung des Zwischenelements vorhanden, jedoch ist dies noch statisch aufgebaut, sodass diese Funktion noch erweitert werden muss. Auch sind in der Demo die Elemente als schwarze Kreise definiert, jedoch werden Grafiken benötigt an denen dann der Effekt ansetzt. All diese Einschränkungen mussten abgeändert werden, sodass zum Schluss nur noch die Grundberechnung der Zwischengrafik übrig bleibt.

4.2.4 Lösung

Die Lösung wird auf mehrere Teilbereiche aufgegliedert. Zu einem wird der Zieheffekt und dessen Berechnung beschrieben. Dann kommt noch ein Bereich, der den Zurückzieheffekt beschreibt. Ein auch wichtiger Teil ist dabei die Handhabung, wann was gezeichnet werden darf.

4.2.4.1 Der Zieheffekt

Die Metaballfunktion, welche den Zieheffekt beschreibt, hat 3 Übergabeparameter. Die ersten zwei sind die Buttons, um die es sich handelt. Der letzte gibt an, wie dick der Effekt zwischen den Buttons werden soll. Als nächstes werden dann die für die Berechnung wichtigen Werte aus den Buttongrafiken ausgelesen. Nachdem die Werte ausgelesen sind, werden diese ausgewertet um weitere Variablen zu setzen, welche dann den Effekt erzeugen sollen. Hier werden die Winkel zwischen den Buttons sowie die Ankerpunkte, an denen der Effekt ansetzt, ermittelt. Auch die Kurven, welche innerhalb des Effekts auftreten werden dabei berechnet. Zum Schluss wird der entstandene Effekt gezeichnet und ausgegeben.

4.2.4.2 Effekterstellung bei Buttonbewegung

In der PaperJS-Demo werden die Verbindungen automatisch erstellt, sobald die Buttons nah genug aneinander sind. Damit dies verhindert wird, wurde ein Schalter namens „paintswitch" angelegt. Dieser soll verhindern, dass dieser Zieheffekt zu früh dargestellt wird und nur wenn der Button über den Hauptbutton gezogen wird zu sehen ist. Dieser „paintswitch" wird innerhalb der Metaballfunktion in der Abfrage, ob die Buttons überlappen, auf „true" gesetzt. Bevor es dann immer zu den Berechnungen kommt, wird geprüft ob der „paintswitch" auf „true" gesetzt ist.

4.2.4.3 Zurückzieheffekt

Damit dieser Zurückzieheffekt animiert wird, wird die Variable „bold", welche im Funktionsaufruf von dem Metaball mitgegeben wird, verringert. Da es mehrere Animationen gleichzeitig geben kann, wenn mehrere Buttons über den Hauptbutton gezogen werden, muss diese Variable für jeden Button extra zugewiesen werden. Dieser gesetzte Wert wird dann in dem onFrame-Event langsam verringert, und die Metaballfunktion aufgerufen. Somit wird die Spur zwischen den Buttons immer dünner. Wird nun der Wert zu niedrig, kommt es zu einem Fehler, dass die Kurven der Grafik übereinander hinauslaufen. Um dies zu verhindern muss abgefragt werden, ob die zwei Kurven sich bereits überlagern. Gibt es eine Überlagerung wird die Animation beendet.

4.2.4.4 Farbe in den Effekt bringen

Für Systeme, die viel Leistung mitbringen, wird der Zieheffekt noch attraktiver gestaltet. So ziehen auch die Farben des Hauptbuttons in den Effekt mit rein. Um dies zu verwirklichen, wird ein Vektor angelegt, der von einem der Ankerpunkte des Zieheffekts zu dem anderen an dem Hauptbutton verläuft. Auf diesem Vektor werden dann die Farben des Hauptbuttons abgegriffen. Die Farben werden in ein Array gepackt. Anschließend wird ein Farbverlauf erstellt, der das eben erstellte Array nutzt und als Füllfarbe des Zieheffekts festgelegt.

4.3 Integration in die Meggleseite

Bisher wurde das Ganze in einer extra HTML-Datei erstellt. Jetzt soll noch die Demo in die bereits vorhandene Struktur von der Meggleseite rein gebaut werden. Dies geht sehr einfach, da man einfach die Canvas-Tags um den zu ersetzenden Content legt. Damit wird automatisch die alte Darstellung gegen die neue ersetzt und dabei dient gleichzeitig die alte Darstellung als Fallback, falls der Browser kein Canvas kann oder auch das JavaScript deaktiviert hat. Um das Doppelte Laden von Bildern zu vermeiden, werden in dem JavaScript-Code vom Canvas die Bilder aus dem bereits existierenden Fallback geladen.

Der Hauptbereich der Seite ist in das div-Tag mit der ID „background" eingefasst. Es genügt das Canvas-Tag um das div-Tag zu schreiben. Zusätzlich müssen wie zuvor schon auch die JavaScript-Dateien „button.js", „paper.js" und das „jquery.cookies.js" eingebunden werden. Um die Bilder zu laden wird das bubbleImages-Array bearbeitet. Mit dem jQuery-Selektor auf die ID des Bildes und dessen Attribut „src" können dann die Bilder reingeladen werden. Ebenso werden auch die Verlinkungen zu den Buttons geladen, jedoch ist der Link in dem dem Image übergeordneten a-Tag.

5 Ergebnis des Meggleprojekts

Als Ergebnis entstand eine Begrüßungsseite für die Kunden. Diese ist interaktiv, so können nun die Buttons verschoben/ausgerichtet werden. Nach dem Verlassen der Seiten werden die Positionen gespeichert, sodass der Besucher gleich wieder seine Orientierung hat. Beim Ziehen der Buttons über den zentralen Button entsteht ein Zieheffekt. In diesem Effekt werden die Farben des Products-Buttons nach außen gezogen. Wenn ein Besucher über ein Mobilgerät kommt, hat er ebenfalls die Funktionalität eines Desktop-PCs oder Laptops. Durch die dynamische Größenanpassung sieht die Seite auf jedem Gerät mit jeder Auflösung gleich aus, so kann immer der gleiche Informationsgehalt dargestellt werden.

6 Fazit

Ziel der Studie war es herauszufinden wie weit die junge HTML5-Technologie Canvas eine Alternative zu der in die Jahre gekommenen Technologie Flash bildet. Zu diesem Zweck wurden die zwei Technologien verglichen, in dem das bereits Vorhandene von Flash mit dem was Canvas bereits bietet verglichen wurde. Dabei wurden viele Tests durchgeführt, die dabei ergaben, dass Canvas durchaus langsam zu einer mächtigen Alternative zu Flash wird, jedoch diese Technologie noch weiter bestehen wird. Vor allem im mobilen Bereich wird Canvas für Animationen im Web unverzichtbar. Eine Großzahl an Grafiken und tabellarischen Auswertungen ergab auch, dass Flash und Canvas inzwischen prozentual fast gleichauf sind, wenn es um die Browserunterstützung im Desktopbereich geht.

Zusätzlich entstanden Leistungsvergleiche, welche zeigen, dass auch Canvas je nach Browser immer leistungsstärker wird und bald Flash auch in diesem Punkt übertreffen kann. Dies zeigte sich vor allem an den entstandenen Übersichten im Kapitel Performance. Zudem entstand eine ausführliche Grundlagenübersicht über die Canvas-Programmierung, welche vom Grundgerüst in HTML bis hin zu Formen, Animationen und Eventlistener geht. Dabei wird alles sehr genau aufgeführt, dass es jedem möglich ist die Elemente nachzuprogrammieren. Auch ein kurzer Exkurs zu vorhandenen Frameworks und deren Funktionsweise ist gegeben. Hierbei wurden die Frameworks KineticJS sowie PaperJS aufgeführt.

Das Projekt für Meggle, welches animierte Buttons auf die Willkommensseite projizieren soll, ist der letzte Teil dieser Arbeit. Es soll noch einmal zeigen was bereits mit der HTML5-Canvas Technologie möglich ist. Hierbei wurde das PaperJS-Framework zur Unterstützung genutzt. Es reflektiert die Funktionalität von Eventlistener auf das Canvas sowie kommen auch zeitgebundene Animationen dabei hervor. Im Kern dieses Projekts findet sich auch ein großer Teil von Berechnungen mit Vektoren, das noch einmal zeigt, dass als Entwickler auch mathematische Kenntnisse benötigt werden um Animationen sauber darstellen zu können.

7 Quellen

Websites:

• www.google.de/analytics
• en.wikipedia.org/wiki/Frame_rate
• www.w3.org/wiki/HTML/Elements/canvas
• www.w3.org/html/wg/drafts/html/master
• www.paperjs.org
• www.kineticjs.com
• www.jquery.com

Bücher:

• Nick Weschkalnies, Rojahn Ahmadi, Ilya Shabanov: Adobe Flash CS6 – Das umfassende Handbuch. Galileo Design, 2012
• Tobias Hauser, Armin Kappler, Christian Wenz: ActionScript 3 – Das Praxisbuch. Galileo Design, 2008
• Jeff Fulton, Steve Fulton: HTML5 Canvas, 2nd Edition. O'Reilly Media, 2013
• Eric Rowell: HTML5 Canvas Cookbook. Packt Publishing, 2011