Bachelorarbeit Canvas im Vergleich zu Flash

Inhaltsverzeichnis

  1. 1 Einleitung
    1. 1.1 HTML5 – Canvas als alternative zu Flash
    2. 1.2 Vision der animierten Buttons für Meggle Pharma
    3. 1.3 Ziel der Arbeit
  2. 2 Kann HTML5-Canvas mit Flash mithalten
    1. 2.1 Kriterien
    2. 2.2 Die Nutzergruppen
      1. 2.2.1 Der Endnutzer
        1. 2.2.1.1 Flash
        2. 2.2.1.2 HTML5-Canvas
      2. 2.2.2 Der Softwareentwickler
        1. 2.2.2.1 Flash
        2. 2.2.2.2 HTML5-Canvas
      3. 2.2.3 Der Grafiker
        1. 2.2.3.1 Flash
        2. 2.2.3.2 HTML5-Canvas
    3. 2.3 Performance
      1. 2.3.1 Testsetup
      2. 2.3.2 Testvorgang
      3. 2.3.3 Testergebnisse
      4. 2.3.4 Rendering: Flash / Canvas
      5. 2.3.5 Vektor- und Bitmap-Grafiken
      6. 2.3.6 Unterschiede nach /liowser
    4. 2.4 Ladezeiten Flash-HTM5 Canvas
    5. 2.5 Revelanz bei neuen Webseiten
    6. 2.6 Zusammenfassung
  3. 3 Grundlagen zu HTML5-Canvas
    1. 3.1 Canvas in der HTML5 Struktur
    2. 3.2 Das HTML5-Canvas-Element
    3. 3.3 Auf das Canvas-Element zeichen
      1. 3.3.1 Einfache Linien und Pfade zeichen
      2. 3.3.2 Rechtecke und Kreise
      3. 3.3.3 Fabverläufe und Bilder
      4. 3.3.4 Bilder in Canvas einbinden
    4. 3.4 Animationen in Canvas
      1. 3.4.1 Interaktion mit dem Canvas-Element
    5. 3.5 Canvas-Frameworks und ihr Vorzüge
      1. 3.5.1 Kinetic.js
      2. 3.5.2 Paper.js
  4. 4 Animierte Buttons für Meggle
    1. 4.1 Erste Schritte
      1. 4.1.1 Grundgerüst erstellen
      2. 4.1.2 Laden der Grundgrafiken im Canvas-Element
      3. 4.1.3 Dynamische Positionierung bei Größenänderungen der Darstellung
        1. 4.1.3.1 Fensterwerte holen und auswerten
        2. 4.1.3.2 Wolke skalieren und ausrichten
        3. 4.1.3.3 Logo skalieren und ausrichten
        4. 4.1.3.4 Buttons skalieren und ausrichten
      4. 4.1.4 Klick-/Touch-Aktionen an die Buttons binden
        1. 4.1.4.1 Mausklick-/Touch-Aktion starten
        2. 4.1.4.2 Aktion bei Mausbewegung/Touchbewegung
        3. 4.1.4.3 Aktion beim Beenden des Mausklicks/Touchevents
        4. 4.1.4.3 Immer die aktuellste Position speichern
    2. 4.2 Animierter Zieheffekt zwischen den Buttons
      1. 4.2.1 Problemstellung
      2. 4.2.2 Erster Ansatz
      3. 4.2.3 Zweiter Ansatz
        1. 4.2.1.1 Überlegung
        2. 4.2.1.2 Vorhandenes nutzen
      4. 4.2.4 Lösung
        1. 4.2.4.1 Der Zieheffekt
        2. 4.2.4.2 Effekterstellung bei Buttonbewegung
        3. 4.2.4.3 Zurückzieheffekt
        4. 4.2.4.4 Farbe in den Effekt /liingen
    3. 4.3 Integration in die Meggleseite
  5. 5 Ergebnis des Meggleprojekts
  6. 6 Fazit
  7. 7 Quellen

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.

  • User:
    • Ist CANVAS auf neuen Geräten Tabelets,Smartphones benutzbar?
    • Sind CANVAS-Technologien barrierefrei?
    • Welche Relevanz spielen Suchmaschinen?
  • Programmierer:
    • Sind die Techniken eifach anzuwenden und flexibel einsetzbar?
    • Benötigt man fundierte Mathematik-Kenntnisse um Animationen in Algorithmen umwandeln zu können?
  • Grafiker:
    • 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.

  • Allgemein:
    • 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 wirdm alle Elemnte 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,spdass beim nächsten Seitenaubau die Buttons wieder auf der letzten Position sind.
    • Der Hauptbutton “Products” darf sich nicht bewegen
  • Zieheffekt:
    • Beim Wegziehen der kleinen Buttons vom Großen, soll eine Verbingung wie bei Metabällen entstehen
    • Setzt man den BUtton ab, soll sich die Verbindung zurück ziehen
    • 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.

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 (Syntaxhilighting, 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.

Diese Punkte werden nun im Folgenden nach Nutzergruppen sortiert behandelt.

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öffentlich 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.

Desktopbrowser
Genutzter Browser Microsoft Internet Explorer Mozilla Firefox Apple Safari Google Chrome Opera
Kein Support: – 8.0 – 1.x – 2.x – 3.x – 8.x
Support seit: 16.03.2010 24.10.2006 18.03.2008 25.10.2010 20.06.2006
Erster Support: 9.0 2.0 3.1 4.0 9.0
Aktuelle Version: 11.0 26.0 6.0 31.0 17.0

Table 1 Desktopbrowser Support

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.

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
62 Kann HTML5-Canvas mit Flash mithalten
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 auf zu rufen, jedoch ist es von anderen Interaktionen durch seine Plug-In-
Eigenschaften abgeschnitten.
Die nachfolgende Grafik stellt eine Statistik da, 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. Sollte die Seite
komplett mit der Technologie entwickelt.

Desktopbrowser Flash

Chart 1 Desktopbrowser Flash

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 Syntaxhilighting 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 Syntaxhilighting hat.
Da es sich bei HTML5-Canvas um Skript-Code handelt, gibt 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-Manipolationen.
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. Die folgende Tabelle zeigt die Nutzungsstatistik Weltweit wie oft welcher Browser genutzt wird. Die Grafik zeigt die Canvasunterstützung aller
Desktopbrowser. Aus ihr geht hervor, dass mindestens 10%, also mindestens jeder
zehnter Nutzer, kein Canvas sehen kann und eine Alternativlösung benötigt wird. Das
hätte dieselben Folgen wie bereits bei Flash erwähnt.

Desktopbrowser
Browser: Microsoft Internet Explorer Mozilla Firefox Apple Safari Google Chrome Opera Andere (Anteilig)
Gesamtanteil: 29,17% 20,60% 4,37% 42,26% 0,73% 2,87%
Kein Support: 10,39% <0,01% <0,01% <0,01% <0,01% –
Support: 18,78% 20,60% 4,37% 42,26% 0,73% –

Table 2 Browserabdeckung

Desktopbrowser Canvas

Chart 2 Desktopbrowser Canvas

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 ein zu
stellen 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.

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. Testen kann man dies auch auf der Webseite “http://frames-per-second.appspot.com/” testen. 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, 6GB
  • GPU: Nvidia GT540m 2GB

Software:

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

2.3.2 Testvorgang

Benchmark Flash-Canvas

2 Benchmark Flash-Canvas

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

 

2.3.3 Testerergebnisse

Der Performancetest bringt noch einmal die Stärken und die Schwächen der jeweiligen
hervor.

Flash-Canvas IE 10 Performance

Chart 3 Flash-Canvas IE 10 Performance

Anhand der gewonnen 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. Warum
dieser sich so gut halten konnte, wird auf der folgenden Grafik ersichtlich.

/publikationen-daten/img/ba-canvas/image008.png

Chart 4 Flash-Canvas IE10 CPU-Last

Nun sieht man, wie die konstante Performance von Flash entsteht. Im Gegensatz zu
HTML5-Canvas benötigt die Flash-Animation viel mehr CPU-Leistung, das vor allem
132 Kann HTML5-Canvas mit Flash mithalten
bei 4000 Partikeln auffällt. Es ist ersichtlich, dass Canvas durch den Browser auf ca. 27%
und Flash auf ca. 60% 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 wirklich 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 da der Flash Player
mit einem 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. So zeigt die
folgende Grafik wie stark die Performance von der Optimierung der Interpreter abhängt.

Browservergleich Canvas Performance

Chart 6 Browservergleich Canvas Performance

Der Firefox und der Internet 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. Hier ist wieder
zu erwähnen, dass die HTML5-Canvas Tests die Prozessorlast von ca 27% nicht
überschreiten, jedoch Flash bei jedem Browser auf bis zu 60% Last hoch geht.

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.

Ladezeiten Flash
Ladezeiten Canvas

3 Ladezeiten Flash-Canvas

Durch die obigen Grafiken können die Ladezeiten bestimmt werden. Wie auch in dem
anderen Test lief hier der InternetExplorer10 mit der Browserinternen Zeitmessung. Bei der Aufzeichnung sind auch Googleanalytics Dateien dabei, welche allerdings das
Testergebnis nicht beeinflussen, sondern durch die fast genau gleiche Ladezeit bei beiden
Szenarien bestätigt, dass die Browser die gleiche verfügbare Bandbreite hatten.
Betrachtet man nun die Codeteile, welche für das Laden des eigentlichen Inhaltes wichtig
sind unterscheiden die sich stark. Lässt man jetzt die Grundhtmlstruktur weg, welche für
die jeweiligen Dateien nur das Grundgerüst bildet in welche sie eingebaut werden, so ist
das Canvas mit seinen 390ms deutlich schneller als das Flash mit den 406ms zu denen
noch eine zweite Datei hinzukommt, welche nochmal 31ms zusätzlich Zeit braucht.
Somit ist das Canvas um insgesamt 47ms schneller.

Wenn es darum geht, ob man nun Flash oder Canvas auf die Seite einbindet ist es von der
Nutzerstatistik egal, so haben, wie in einem früheren Kapitel geschrieben, 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. Wie auch bereits erwähnt wurde diese Technologie auf diesen Geräten
ausgeschlossen. 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.



Canvas

Flash

Wo läuft es?
 Canvas arbeitet in jedem HTML5 Web Browser. Allerdings bei IE erst ab Version 9. Es funktioniert in allen iOS und Android Browsern auf Smartphones und Tablets Flash läuft in jedem Browser, der das Plugin unterstützt. Allerdings wird es nicht mehr von Android sowie iOS Geräten supported

Wie erstellt man es?
 Ziemlich die gesamte Erstellung von Canvas wird per Hand gemacht. Inzwischen entstehen immer mehr Frameworks und Plugins. Es existieren viele kommerzielle Anwendungen, mit denen einfach Flashanimationen erstellt werden können.

Grafiktyp
 Das Canvas-Element erstellt Bitmap-Grafiken, aber es kann auch Vektoren zeichnen. Meistens werden sie manuell mit JavaScript erstellt. Flash ist komplett Vektor-basiert. Aber es ist möglich Bitmap-Bilder in Flash-Dateien einzubinden.

In HTML?
 Canvas ist ein HTML5 Element, und somit automatisch in HTML integriert. Flash wird extra als SWF Datei eingebunden und es wird ein Browser-Plugin benötigt, damit es läuft.

Benötigte Technologie?
 Es wird JavaScript benötigt, um das Element dar zu stellen. Wenn JavaScript deaktiviert ist, dann bleibt das Element leer. Es wird ein extra Plugin benötigt um die Grafiken darzustellen.

Performance
 Canvas ist sehr schnell beim Erstellen von Bildern, aber es benötigt zusätzlich Zeit zum Laden vom JavaScript. Es wird durch den Browser auf 27% der Prozessorleistung begrenzt Flash braucht lange, bis die SWF Datei und die Einbindung geladen wird. Das Plug-In erlaubt dem Flash-Element bis zu 60% der CPU zu beanspruchen.

SEO?
 Das Element ist textbasierend und somit von allen Suchengines erfassbar. Da Flash als SWF Datei eingebunden wird, ist es schwierig für Suchengines die Inhalte zu erfassen.

Interaktivität
 Man kann nur das Canvas Element anklicken, es gibt keine speziellen Klickzonen. Allerdings kann man per JavaScript ein Workaround generieren und man kann Interaktionen zwischen Webseite und Canvas ausführen. Flash kann mehrere Klickbare stellen in der Grafik haben. Keine Interaktion mit der Webseite und dem Flash-Element

Table 3 Zusammenfassung Flash-Canvas

3 Grundlagen zu HTML5-Canvas

3.1 Canvas in der HTML5 Struktur

Das Canvas-Element wird wie jedes andere HTML5-Element wie <div></div> ,
<table></table> behandelt und mit seinen Tags <canvas></canvas> eingebunden.

HTML-Grundgerüst Canvas

Code 1 HTML-Grundgerüst Canvas

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. Es wird nur noch als <!DOCTYPE html> bezeichnet.
Im <head> Bereich werden weiterhin <title> , <meta> , <style> , <script> , <link> und
andere aus alten HTML-Versionen bekannte Tags genutzt. Der <body> Bereich ist
weiterhin für den eigentlichen HTML-Content, der dann dem Nutzer angezeigt wird. In
diesem Fall ist in dem <body> -Tag nur ein <div> , 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. An dieser Stelle kann auch komplexerer
HTML-Code stehen, welcher die entstehende Lücke ersetzt.

3.2 Das HTML5-Canvas-Element

Um mit dem Canvas-Element arbeiten zu können muss nun ein <cript> -Tag für den
JavaScript-Code erstellt werden. Dies kann überall in dem HTML-Code liegen. Liegt es
vor dem <canva> -Tag muss man jedoch sicher gehen, 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 und keine Probleme mit eventuell
anderen, auf der Seite implementierten, Canvas-Elementen gibt.

Canvas-Context holen

Code 2 Canvas-Context holen

In diesem Codebeispiel sind nun noch im <head> das <style> – und das <script> -Tag,
sowie ist im <canvas> -Tag das Attribut id hinzugekommen. Die id wird nun für CSS-
Eigenschaften genutzt und um im JavaScript-Code das Canvas-Element anzusprechen.
Im Style-Bereich bekommt das Canvas einen Rahmen, damit im Browser besser die
Grenzen zu sehen sind.
Damit das JavaScript im <head> nicht zu früh ausgeführt wird, wird der Code in eine
„windows.onload“-Funktion gekapselt. Dadurch wird der Code erst nachdem die
komplette HTML-Datei geladen ist ausgeführt.
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, bestimmen. 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. Dabei werden nur noch die JavaScript Teile gezeigt, da das HTML-Gerüst
gleich bleiben wird. Die Folgenden Elemente wurden ausgewählt, da auch Flash nur diese
Grundelemente mit Actionscript3 darstellen kann.

3.3.1 Einfach Linien und Pfade zeichen

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.

Canvas-Pfade zeichnen

Code 3 Canvas-Pfade zeichnen

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 DartstellungsVariablen 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 Defaoltwert ist „butt“
    gesetzt
  • lineWidth: Hier kann die Breite des Pfades in Pixeln angegeben werden. Als
    Defaoltwert 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.

Um den Programmcode nachvollziehen zu können hilft folgende Grafik, sie Stellt den
Zeichenvorgang mit den einzelnen Schritten dar, dabei zeigen die schwarzen kreise, wann
eine Linie endet und die nächste beginnt.

Canvas-Pfade zeichnen

4 Canvas-Pfade zeichnen

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.

Canvas-Rechteck zeichnen

Code 4 Canvas-Rechteck zeichnen

In diesem Codebeispiel 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. Mit den Bereits in Kapitel 3.3.1
erwähnten variablen „lineWidth“ und „strokeStyle“ werden die Werte für den, das
Rechteck umschließenden Pfad gesetzt und durch die Funktion „stroke()“ gezeichnet.

Canvas-Kreis zeichnen

Code 5 Canvas-Kreis zeichnen

Wie auch bei dem Rechteck existieren für den Kreis die Möglichkeiten, diesen
aufzufüllen oder auch den Pfad um das Element zu Zeichnen.
Der Kreis selbst wird durch die „arc()“ Funktion des Kontextes gezeichnet. Er wird in der
Rechten hälfte zentriert mit deinem Radius von 100 Pixeln gezeichnet.

Canvas-Halbkreis zeichnen

Code 6 Canvas-Halbkreis zeichnen

Der Kreis kann auch nur zu einem bestimmten Grad gezeichnet werden. Der Unterschied
von diesem Kreis zu dem vorherigen liegt darin, dass nur „Math.PI“ als startwert gesetzt
wurde. Somit wird nur ein halber Kreis gezeichnet. Dieses Element wird dann im Canvas
im unteren linken Viertel dargestellt.
Die Befehle rect() und arc():

  • rect(x,y,breite,höhe): Der Befehl wird mit 4 Parametern aufgerufen. 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): Die Funktion wird mit 5 Parametern aufgerufen.
    Dabei stehen „x“ und „y“ für den Kreismittelpunkt und „radius“ für den Radius
    des Kreises, also den Abstand vom Mittelpunkt zum Rand. Die Werte „winkels“
    und „winkele“ definieren den Kreisbogen. Dabei steht „winkels“ für den
    Startwinkel und „winkele“ für den Endwinkel. Die Angaben verlaufen wie in
    einem Koordinatensystem von rechts aus, allerdings im Uhrzeigersinn. Um die
    Winkel besser bestimmen zu können, kann die Konstante Math.PI genutzt
    werden. Dabei gilt, dass PI einen halben Kreis beschreibt.

Canvas-Rechteck,Kreis,Halbkreis

5 Canvas-Rechteck,Kreis,Halbkreis

Diese Grafik zeigt nun noch einmal in blau das Rechteck, sowie in Rot den vollen Kreis.
Der grüne Kreis ist nun von

3.3.3 Farbverläufe und Bilder

Es gibt 2 verschiedene Formen von Farbverläufen. Einmal existiert der lineare
Farbverlauf und zum Zweiten gibt es noch 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. Somit nimmt die aktuelle
Zeichnung diese Eigenschaften auf. In den folgenden Beispielen wird klargestellt, wie
diese Verläufe anzuwenden sind.

Canvas-Linearen Farbverlauf zeichnen

Code 7 Canvas-Linearen Farbverlauf zeichnen

Zuerst wird ein Rechteck definiert, welches mit dem Farbverlauf gefüllt werden soll. Hier
wird das Rechteck über das gesamte Canvas gespannt. Danach wird der lineare
Farbverlauf mit „createLinearGradient(x1,y1,x2,y2)“ wobei „x1“ und „y1“ für den Start
des Farbverlauf und „x2“ und „y2“ für das Ende stehen. Mit dem Befehl
„addColorStop(start,color)“ werden dann die einzelnen Farbstops hinzugefügt. Dabei ist
der Parameter „start“ für den Startbereich innerhalb des Verlaufs und die Farbe, steht für
die Farbe, welche bis zum nächsten start laufen soll.
Bei dem Radialen Farbverlauf ist das sehr ähnlich. Die Farbstops werden wie bei dem
linearen Farbverlauf erstellt. Nun unterscheiden sich nur das Objekt und dessen
Parameter.

Canvas-Radialen Farbverlauf zeichnen

Code 8 Canvas-Radialen Farbverlauf zeichnen

Der Verlauf wird mit „createRadialGradient(x1,y1,radius1,x2,y2,radius2)“ definiert. Die
Einserwerte geben die Position und Radius des inneren Startkreises an. Die Zweierwerte
geben den äußeren Kreis mit Position und Radius an, in diese Richtung verläuft dann die
Farbe.

Canvas-Linearer Farbverlauf

 

6 Canvas-Linearer Farbverlauf

 

Canvas-Radialer Farbverlauf

 

7 Canvas-Radialer Farbverlauf

 

 

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.

Canvas-Bild laden

Code 9 Canvas-Bild laden

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. Um das Bild zu laden wird hier die URL zu dem Meggle-
Logo in die „src“-Variable des Image-Objekts geschrieben.

Canvas-Meggle Logo als Bild geladen

8 Canvas-Meggle Logo als Bild geladen

Im Ergebnis wurde noch ein blauer Hintergrund erstellt, damit auch der weiße Text zu
sehen ist.

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. Das Grundgerüst für eine Animation sieht wie folgt aus.

Canvas-Animation Grundlagen

Code 10 Canvas-Animation Grundlagen

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 Defaoltfunktion 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. Dies ist wichtig, damit dann die Pause entsteht, bevor die neue Grafik
gezeichnet wird.

Um nun eine bewegte Box zu erstellen, muss der obige Code noch erweitert werden. Im
Folgenden Beispiel wird eine Funktion zum Zeichnen eines Rechtecks hinzugefügt,
sowie die „animate()“ Funktion erweitert.

Canvas-Animation ausführen

Code 11 Canvas-Animation ausführen

In diesem Beispiel wurde nun ein Objekt „animRechteck“ erstellt, um die Eigenschaften
des Rechtecks zu speichern. Gezeichnet wird es mit der Funktion „zeichnen()“. Der
Funktionsaufruf animate()“ wurde um eine Zeitvariable „startT“ erweitert, um den
Fortschritt der Animation mit „deltaT“ zu beschreiben.

3.4.1 Interaktion mit dem Canvas-Element

Damit das Canvas-Element auch interaktiv wird, unterstützt es verschiedene
Eventlistener. Unter neben den Listenern, die auf Mausaktionen hören, gibt es auch den
Listener, der auf Tastatureingaben reagiert. Diese können wie folgt angesprochen werden.

Canvas-Eventlistener

Code 12 Canvas-Eventlistener

Um dem Canvas-Element einen EventListener zu geben, muss man ihm einen mit
„addEventListener()“ einen 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. In dieser „evt“ werden dann verschiedene Daten wie die
aktuelle Mausposition oder die gedrückte Taste gespeichert. Innerhalb der Callback-
Funktion kann noch andere Logik, die im Zusammenhang mit der Interaktion steht,
ausgeführt werden.
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()“ entfernen, 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. DesWeiteren bieten sie dem Entwickler einschnellere Entwicklung durch vorgefertigteFunktionen, die sonst erst selbst ausprogrammiert werden müssen. Auch das LayerSystem ist ein großer Vorteil, da dadurch beliebig 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 erweiterten Event-Management. So kann beim Anlegen eines
neuen Elements oder Ebene durch eine Variable dieses direkt mit der Maus verschiebbar
(draggable) werden. Auch Mausevents und Tastaturevents können direkt bei der
Erstellung zugewiesen 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 Kinekt-Framework
    komfortabler durch den Entwickler angesprochen.

KineticJS-Grundlagenzusammenfassung

Code 13 KineticJS-Grundlagenzusammenfassung

Dieser Code zeigt den Grundumgang mit dem Kinect-Framework. Hier muss um
Gegensatz zum normalen Canvas-Code ein „div“-Tag erstellt werden, über dessen IDdann beim Anlegen der Kinetic Stage zugegriffen wird. Wenn die Stage angelegt wird, wird automatisch ein Canvas der definierten Größe erstellt. Dann können Layer erstellt werden, denen die Gruppen zugewiesen werden können. Diese Gruppen können dann die Grundelemente Rect, Circle und Line erweitert werden. Beim Erstellen der Elemente, wird jeweils mit JSON-Definiertes Objekt mitgegeben, das die Erstellung automatisiert. Das Ergebnis aus dem obigen Code sieht dann wie folgt aus.

KineticJS-Grundlagenzusammenfassung

9 KineticJS-Grundlagenzusammenfassung

Auch Animationen und Eventbindungen vereinfacht das Framework durch kürzere,
übersichtlichere Befehle. So ist es bei Animationen nur noch ein kleiner Teil des
anfänglichen, unübersichtlichen JavaScript-Codes.

KineticJS-Animation ausführen

Code 14 KineticJS-Animation ausführen

Mit dem „Kinetic.Animation“-Objekt kann anfangs die Animationen 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
(„stop()“) werden.
Die Events haben auch mehr an Funktionalität gewonnen und sind dabei auch einfacher
zu nutzen. So ist es möglich wie bei normalem JavaScript-Code auf die VerschiedenenEventlistener zurück zu greifen. Jedoch können direkt Eventlistener auf alle erstellten
KineticJS-Elemente gelegt werden.

KineticJS-Eventlistener

Code 15 KineticJS-Eventlistener

Hier werden einem zuvor definierten Kreis verschiedene Eventlistener gegeben, diese je
nach Aktion deren Funktion in die Browserkonsole schreiben. Diese „on()“-Funktion
lässt sich nicht nur bei kreisen sondern auch auf alle anderen Elemente legen, welche zu
Anfang des Kinetic.js-Kapitel beschrieben wurden.

3.5.2 Paper.js

PaperJS ist ein ähnliches Framework wie das KineticJS, es bietet genauso das
Schichtennsystem mit Layern, Gruppen und Shapes. Die Stage wurde weg gelassen, 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.
Wie bei KineticJS werden auch hier Animationen vereinfacht, doch gehen sie noch einen
Schritt weiter. Es kann einfach für jedes erzeugte Element eine eigene Animation
definiert werden indem man die „onFrame()“ Funktion des Elements definiert. Diese
Funktion ist hier auch für jedes Ebenenelement definierbar. Es gibt ebenso die
Eventlistener, welche genauso wie die Animationsfunktion mit „onMouseDown()“ und
assoziativ zu den anderen Befehlen angesteuert werden.

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 das heißt, es streckt das
Element auf die komplette Fensterbreite, sowie setzt es einen Farbverlauf im Hintergrund.
Die Datei, in der dann die Animationen berechnet werden wird nach dem Canvas-
Element geladen, damit sicher gegangen wird, dass auch das Canvas geladen ist. Durch
die HTML5 Spezifikation wird kein Beschreibungsfehler durch die Positionierung des
Skriptbereichs verursacht.

Meggle-HTML Grundgerüst

Code 16 Meggle-HTML Grundgerüst

Der HTML-Code oben zeigt die Indexdatei, von der aus alles aus geht. Der HEAD-
Bereich wurde bereits beschrieben. 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. Das „div“ wird durch CSS auf die gesamte
Fenstergröße gestreckt. 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über liegenden Elements erstreckt. Als Alternativtext, falls das Canvas vom
Browser nicht unterstützt wird, wird „Kein Canvas verfügbar“ ausgegeben. Als
Hintergrundgrafik wird eine Ellipse mit einem Farbverlauf von 2 Blautönen mit der CSS-
Eigenschaft „background-image“ 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. Sie können direkt über die Pfadangabe
„img/dateiname“ aufgerufen und dann verarbeitet werden. Um die Grafiken nun in das
Canvas zu laden wird das Objekt „Raster()“ genutzt, das im Konstruktor einen Bild Pfad
erwartet. Dieses Objekt wir für alle Grafiken innerhalb des Canvas genutzt um
vorgefertigte Bilder zu laden. Wird das Objekt in eine Variable gespeichert, kann es
danach durch dessen interne Funktionen wie „scale()“ oder „position()“ manipoliert
werden. Ihm wird auch intern eine ID verpasst, durch das es später innerhalb des Canvas-
Elements identifiziert werden kann.
Das Logo und weiße Wolke werden in dem Code dann in festen Variablen
gespeichert, um auf diese später bei der dynamischen Positionierung im folgenden
Kapitel zugreifen zu können. 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. Beim Erstellen der Buttons, werden diese in ein Array
gespeichert, um bei der späteren Animation durch diese durchiterieren zu können.

Das nun folgende Codebeispiel verdeutlicht noch einmal das Vorgehen.
Hier werden die Arrays für die Buttons definiert.

Meggle-Buttonposition
Code 17 Meggle-Buttonposition
Meggle-Buttonbilder
Code 18 Meggle-Buttonbilder

 

Meggle-Buttonslinks
Code 19 Meggle-Buttonslinks
Meggle-Buttonskalierung
Code 20 Meggle-Buttonskalierung

 

 

Die „bubblePositions“ geben die Positionen der Buttons an ebenso geben „bubbleImages“
die Bilder und „bubbleLinks“ die Links an (hier sind die Links vereinfacht mit einem
Hashtag angegeben), auf die nach einem Klick verwiesen werden soll. Das Array
„bubbleScales“ wird benötigt, damit die Images von der Größe an die der Hauptbuttons,
welche auf der normalen HTML-Seite sind angepasst werden.
Als nächstes werden die Bilder für die Wolke sowie für das Logo geladen. Dies geschieht
mit der Raster-Klasse.

Meggle-Hintergrund und Logo laden

Code 21 Meggle-Hintergrund und Logo laden

Damit später mit den Buttons gearbeitet werden kann, werden diese in ein Array Namen
„circlePaths“ gespeichert. Dieses wird innerhalb einer for-Schleife mit dem JavaScript-
Befehl „push“ befüllt. Bevor die Bilder in das Array werden sie noch nachskaliert, um
wie bereits erwähnt die Skalierung der Hauptseite zu bekommen.

Meggle-Buttons laden

Code 22 Meggle-Buttons laden

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, welches die Positionierung und die
Größenänderungen der Elemente beschreibt. Damit die Grafiken immer für die Nutzer im
vollen Maße dargestellt werden und ihm eine gute Übersicht bei jeder Fensterauflösung
bietet 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 FollHD-Monitor mit 1920 x 1080 Pixeln
ausgegangen. Die aktuelle Auflösung des Fensters kann durch interne Variablen des
Canvas-Elements aufgerufen werden. Hierzu werden die „view.bounds.width/height“
genutzt. 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.
Da die Buttons immer vom Mittelpunkt des Canvas-Elements aus ausgerichtet werden
müssen, wird zur Skalierung noch der Mittelpunkt benötigt, dies wird durch
„view.bounds.width /2“ und „view.bounds.height /2“ erreicht, welches in dem folgenden
Code ersichtlich wird.

Meggle-Festerdaten und Skalierung auslesen

Code 23 Meggle-Festerdaten und Skalierung auslesen

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. Dieser Wert wird später für die Neuskalierung der Elemente
benötigt um wieder von der Grundskalierung der Elemente ausgehen zu können. Anfangs
ist „scale“ mit 1 initialisiert, da dies die Grundskalierung für die bereits erwähnte FollHD-
Auflösung ist. Wenn nun immer von der Grundskalierung ausgegangen werden soll, muss
bei jedem Skalierungsvorgang die neue Skalierung durch die alte dividiert werden, um
die richtige Größe zu erhalten. Ohne dieser Variablen würden die Elemente bei jeder
Neuskalierung immer kleiner werden bzw. zum Mittelpunkt des Canvas-Elements
rutschen.
Für die Restlichen Elemente wird nun abgefragt, in welche Richtung die Skalierung
kleiner ist und danach wird dann die Skalierung der Restlichen Elemente ausgerichtet.
Das ist wichtig, damit die Elemente auch richtig dargestellt und positioniert werden
können. Dies wird durch ein einfaches if – else – Statement erreicht, welche die niedrigere
Skalierung in eine Variable speichert, welche später für weitere Aktionen genutzt wird.
Damit die Elemente jedoch nicht zu klein werden, soll die Größenänderung erst unter
einer Skalierung von unter 70% stattfinden. Dies wird durch ein weiteres if – else –
Statement ausgewertet.

Meggle-Skalierungsstärke ermitteln

Code 24 Meggle-Skalierungsstärke ermitteln

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 wie bereits
berechnet mit der „scale()“-Funktion des Elements erreicht. Hierzu wird die aktuelle
Breitenskalierung durch die alte Breitenskalierung geteilt. Bei der Positionierung wird
der „position“-Variable des Elements ein neuer Punkt zugewiesen. Die Position wird
immer vom Mittelpunkt des Elements aus ausgerichtet. Daher ist die X-Koordinate der horizontale Mittelpunkt des Canvas-Elements, der bereits durch „view.bounds.width /2“
errechnet wude. Die Y-Koordinate errechnet sich durch die Höhe des Canvas
(„view.bounds.height“) und der halben Höhe des Elements selbst („elem.bounds.height
/2). Zieht man von der Höhe des Canvas-Elements die halbe Höhe der Wolkengrafik ab,
wird die Position erreicht.

Meggle-Hintergrund neu skalieren und ausrichten

Code 25 Meggle-Hintergrund neu skalieren und ausrichten

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.

Meggle-Logo neu skalieren und ausrichten

Code 26 Meggle-Logo neu skalieren und ausrichten

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 skaliren und ausrichten

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

Meggle-Buttons neu skalieren und ausrichten

Code 27 Meggle-Buttons neu skalieren und ausrichten

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 um die jeweiligen, gleichnamigen Events zu nutzen.

4.1.4.1 Mausklick-/Touch-Aktion starten

Das initialisieren einer Klickaktion wird mit der „onMosueDown()“-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. Anschließend wir der angeklickte Button 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. Da bei dem Klick auf ein Element
dieses automatisch in den Vordergrund gebracht wird müssen Elemente wie das Logo
und der Hintergrund wieder zurückgesetzt werden, damit die Buttons nicht verschwinden
und der Nutzer nicht mehr auf die Funktionalität zugreifen kann.

Meggle-Mausdwon Aktion auswerten

Code 28 Meggle-Mausdwon Aktion auswerten

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. Ebenso wird
die Funktion keine änderungen vornehmen, sollte kein Element angeklickt worden sein.

Meggle-Mausdrang-Aktion auswerten

Code 29 Meggle-Mausdrang-Aktion auswerten

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.

Meggle-Mausup-Aktion auswerten

Code 30 Meggle-Mausup-Aktion auswerten

4.1.4.4 Immer die aktuellsten Position 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, das auch in der „onFrame()“-Funktion
passiert.

Meggle-Buttonspositionen in Cookie speichern

Code 31 Meggle-Buttonspositionen in Cookie speichern

Dieses Cookie wird beim Laden der Seite immer gesetzt. Sollte es nicht gesetzt sein,
werden die Positionen nach einer Standardbelegung gesetzt. Hierfür wird das bereits
erwähnte „bubblePosition“-Array am Anfang des Codes anders gesetzt.

Meggle-Buttonposition aus Cookies auslesen

Code 32 Meggle-Buttonposition aus Cookies auslesen

Mit Hilfe des jQuery-Cookie-Plugins wird das Speichern und lesen der Cookies
vereinfacht. So muss nur noch „$.cookie()“ aufgerufen werden. Dabei ist der erste Wert
der Cookiename der gesetzt / ausgelesen werden soll und der zweite Parameter wird beim
Schreiben mit dem zu schreibenden Wert belegt. 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. JavaScript macht dabei keinen
Unterschied zwischen JSON-Objekten oder Arrays, da diese gleich beschrieben werden.

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 und sorgt dafür, dass der Nutzer immer die Übersicht behält. 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 bewegen.

4.2.2 Ester Ansatz

Durch Recherche hat sich herausgestellt, dass es sich bei diesem Effekt um die
sogenannte „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 simoliert das zusammenlaufen / entfernen von 2 Bällen. Durch die
Überlagerung der Schatten wird ein bestimmter Schwellwert erreicht, welcher dann so
hoch ist, dass er von dem Filter als Bereichswechsel erkannt wird und die Bälle dadurch visuell zusammenlaufen. Mehr Details zu diesem Vorgehen können unter http://www.geisswerks.com/ryan/BLOBS/blobs.html gefunden werden. Das Problem bei
dieser Methode ist jedoch, dass dieser Effekt auftritt, sobald die Kugeln sich nähern.
Jedoch soll in diesem Fall dies 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. Für diese Zeichnung zwischen den Punkten müssen
dann verschiedene Werte gefunden werden, aus denen sich dann dieser Effekt ergibt. Als
Ansatzpunkte für diese Grafik können die Werte der zwei Bälle genutzt werden. Dies
wird auch auf PaperJS bei einem Beispiel beschrieben, das teilweise die Funktionalität
bietet, welche hier benötigt wird.
Für die Darstellung des Effekts wird dabei anfangs der der Abstand zwischen den Bällen
berechnet- dies dient dazu einige Konfigurationsvariablen zu setzen, damit der Effekt bei
überlagernden Bällen anders an deren Rand ansetzt. 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. Somit sind die
Ankerpunkte der Zeichnung gefunden.
Als nächstes geht es um die Vektoren, welche für die Kurven innerhalb der Zeichnung
wichtig sind. Diese errechnen sich wieder aus den Radien und der Entfernung der Buttons.
Anhand dieser nun entstandenen Koordinaten und Vektoren wird ein Pfad gezeichnet, der
anschließen mit einer Farbe gefüllt wird.

4.2.3.3 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. So ist in dieser Demo nur die Berechnung des
Zwischenelements vorhanden, jedoch ist dies noch statisch aufgebaut, sodass diese
Funktion noch erweitert werden muss. Unter anderem wird bei dieser Lösung immer die
Verbindung generiert, wenn die Punkte einen bestimmten Abstand voneinander haben
und beim Loslassen zieht sich das Element nicht zurück. Auch sind in der Demo die
Elemente als schwarze Kreise definiert, jedoch werden Grafiken benötigt an denen dann
der Effekt ansetzt. Es kann auch nur ein Ball bewegt werden, allerdings sollte es für
Meggle möglich sein, alle Bälle bis auf einen zu bewegen. All diese Einschränkungen mussten abgeändert werden, dass 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. Für die Lösung wird der in 4.2 beschriebene Ansatz genutzt und
erweitert.

4.2.4.1 Der Zieheffekt

Der 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.

Meggle-Metaball Buttonwerte holen

Code 33 Meggle-Metaball Buttonwerte holen

Nachdem die Werte ausgelesen sind, werden diese ausgewertet um weitere Variablen zu
setzen, welche dann den Effekt erzeugen sollen. So werden 2 Variablen gesetzt, die die
Darstellung so verändern, dass wenn die Buttons überlappen der Effekt etwas breiter
angesetzt wird. Danach finden die Berechnungen, welche von der PaperJS-Demo
übernommen wurden statt. 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.

Meggle-Metaball-Effekt berechnen und erstellen

Code 34 Meggle-Metaball-Effekt berechnen und erstellen

Damit die Verbindung immer erstellt wird, wird diese Metaballfunktion in der
„onMouseDrag()“-Funktion aufgerufen.

4.2.4.2 Effekterstellung bei Buttonbewegung

In der PaperJS-Demo werden die Verbindungen automatisch erstellt, sobald die Buttons
nah genug aneinander sind. Damit die verhindert wird, wieder 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. Dadurch kann sicher gegangen werden, dass die Buttons
überlagern. Jedoch wird dabei auch noch geprüft, ob der Button nicht komplett innerhalb
des Hauptbuttons ist, damit kein „negativer“ Zieheffekt entsteht. Bevor es dann immer zu
den Berechnungen kommt, wird geprüft ob der „paintswitch“ auf „true“ gesetzt ist, damit
keine unnötigen Berechnungen ausgeführt werden oder Fehler auftreten. Auch in einem
späteren Bereich, wenn es dann um diese Zurückziehanimation geht wird der Paintswicht
am Ende dann zurück gesetzt.

Meggle-Abfrage ob der Effekt gezeichnet werden darf

Code 35 Meggle-Abfrage ob der Effekt gezeichnet werden darf

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. Um
dies zu erreichen wird ein Array angelegt, in dem zu jedem Button ein „bold“-Wert
gespeichert wird. Dieser Wert wird beim Ziehen des jeweiligen Buttons gesetzt. 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.

Meggle-Zurückziehanimation Funktionsaufruf

Code 36 Meggle-Zurückziehanimation Funktionsaufruf

Damit die Animation bei allen Buttons stattfindet, wird hier durch alle Buttons außer dem
Hauptbutton iteriert. Innerhalb dieser schleife wird dann zu den jeweiligen Buttons geprüft, ob diese noch gezeichnet werden dürfen. Wenn dies der Fall ist, wird eine
Funktion „generateConnection()“ ausgeführt, welche nur die alte Animationsgrafik
entfernt, die Metaballfunktion aufruft und die neue Grafik darstellt.
Wird nun der Wert zu niedrig, kommt es zu einem Fehler, dass die Kurven der Grafik
übereinander hinauslaufen und dadurch die Darstellung nicht mehr passt. Um dies zu
verhindern muss abgefragt werden, ob die zwei Kurven sich bereits überlagern. Dafür
gibt es eine extra Funktion namens „checkIntersection()“ mit dieser das geprüft werden
kann. Ihr werden als Parameter die 2 Kurven mitgegeben.

Meggle-Prüfen ob Animation zu ende ist

Code 37 Meggle-Prüfen ob Animation zu ende ist

Gibt es nun eine Überlagerung wird die Animation beendet. Für die Handhabung wann
die Animationen ausgeführt werden sollen, wurde wie für die Dicke der Darstellung ein
Array namens „animate“ erstellt. Dieses stellt einen Schalter dar, der bei bestimmten
Bedingungen gesetzt wird, wie z.B. beim Ende der Animation wird der jeweilige Wert
auf „false“ gesetzt. Auf „true“ wird er beim Loslassen der Maustaste gesetzt, jedoch nur
wenn auch der Button über den Hauptbutton davor gezogen wurde.

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. Damit der Vektor immer die
richtigen werte abgreift, wird dieser mit der aktuellen Skalierung gestreckt. Auf diesem
Vektor werden dann die Farben des Hauptbuttons abgegriffen. Dabei wird die Feinheit
durch die Abtastrate bestimmt. Die Farben unter dem Vektor werden abgegriffen und in
ein Array gepackt. Anschließend wird ein Farbverlauf erstellt, der das eben erstellte Array
nutzt. Ausgerichtet wird der Verlauf auf dem Vektor zwischen den Buttons. Nach der
Erstellung des Farbverlaufes wird dieser als Füllfarbe des Zieheffekts festgelegt.

Meggle-Dynamische Farben für den Metaballeffekt definieren

Code 38 Meggle-Dynamische Farben für den Metaballeffekt definieren

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 wie bei den Canvasgrundlagen bereits erwähnt man einfach die <canvas>-
Tags um den zu ersetzenden Content gelegt werden müssen. 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.

Meggle-Einbindung des Canvas in die Webseiten-HTML-Struktur

Code 39 Meggle-Einbindung des Canvas in die Webseiten-HTML-Struktur

In dem vorangegangenen Codeteil ist das Canvas bereits integriert. 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“ ein zu binden und
die komplette Funktionalität ist schon gegeben. 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 reingeladenwerden. Ebenso werden auch
die Verlinkungen zu den Buttons geladen, jedoch ist der Link in dem der Images übergeordneten <a>-Tag. Dieser lässt sich dann mit „.parent()“ um dann wiederum den Attributsselektor, aber diesmal auf „href“, zu nutzen. Dies sieht dann wie folgt aus.

Meggle-Dynamisches nachladen von Bildern und Verlinkungen

Code 40 Meggle-Dynamisches nachladen von Bildern und Verlinkungen

Zu erst läuft der jQuerySelektor mit „$(“#id”)“ auf das HTML-Element. Dann wird mit
dem „.attr()“ auf das Attribut des HTML-Elements zugegriffen. Bei den Links wird dann
auch noch der „parent()“-Selektor dazwischen geschalten, eben wegen der höheren
Ebene.

5 Ergebnis des Meggleprojekts

Meggle-Pharma Desktopseite

10 Meggle-Pharma Desktopseite

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. Dieser ist in
Abbildung 10 gut zu sehen. 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 eines Desktop PCs
oder einen Laptops, wie es in Abbildung 11 zu sehen ist. Hier handelt es sich um einen
Screenshot von einem Smartphone mit der Aktuellsten Androidversion 4.4 von Google. 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.

11 Meggle-Pharma Mobilseite

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 eine alternative
bietet. 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 auch 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 nach zu programmieren. Auch ein kurzer Exkurs zu Vorhanden
Frameworks und deren Funktionsweise ist gegeben. Hierbei wurden die Frameworks
KineticJS sowie PaperJS aufgeführt. Bei dem KineticJS Framework sind auch Beispiele
für die Vereinfachung, die es bei der Programmierung mit sich bringt gegeben. PaperJS
wurde dann für ein Pilotprojekt für Meggle genutzt.

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 wie schon gesagt 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 auch Animationen sauber darstellen zu können.

7 Quellen

Websiten:

Bücher:

  • Nick Weschkalnies, Rojahn Ahmadi, Ilya Shabanov, Adobe Flash CS6: Das umfassende
    Handbuch, Galileo Design, 28.10.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, 25.11.2011