Eine Einführung in HTML5 Canvas

8 gute Gründe HTML5 Canvas zu nutzen
Kommentare

HTML5 und seine Spezifikationen erlauben es Web-Entwicklern heute Dinge im Browser zu vollführen, die vor einiger Zeit noch undenkbar waren, wie etwa dank HTML5 Canvas Grafiken zu  zeichnen und Animationen zu erstellen.

Was aber genau ist HTML5 Canvas? Das Canvas-Element wird im HTML-Code durch die beiden Attribute width und height bestimmt. Seine Stärke liegt in der Nutzung des HTML5 Canvas API, das wiederum genutzt werden kann indem man JavaScript-Code schreibt, mit dem über ein Set an Drawing-Funktionen Zugang zur Canvas Area erhält und dynamisch generierte Grafiken erstellen kann.

Es gibt diverse Gründe, aus denen der Einsatz von HTML5 Canvas interessant sein könnte: Ivaylo Gerchev hat in seinem Blog-Post „HTML5 Canvas Tutorial: An Introduction“ 8 Beispiele aufgelistet

  1. Interaktivität Canvas ist vollständig interaktiv. Es kann auf User-Aktionen reagieren, indem es auf Keyboard- , Maus- oder Touch-Events „hört“.
  2. Animation Jedes Objekt, das auf den Canvas gezeichnet wird, kann animiert werden
  3. Flexibilität Mit Canvas können sowohl Linien, Formen und Text als auch Bilder und andere Medien angezeigt werden – mit oder ohne Animation.
  4. Support HTML5 Canvas wird von allen führenden Browsern unterstützt und ist sowohl von Desktops, Tablets als auch Smartphones zugänglich.
  5. Standardisierung Canvas ist eine offene Technologie und auch wenn bisweilen nicht alle Features von HTML5 unterstützt werden, so darf man sich doch sicher sein, dass es präsent bleiben wird.
  6. Verbreitung HTML5 Canvas hat ein hohes Maß an Portabilität – eine Canvas-Applikation kann einmal entwickelt, so ziemlich überall laufen.
  7. Umsetzbarkeit Im Wesentlichen braucht man für eine HTML5-Canvas-Applikation nur einen Browser und einen Code Editor. Außerdem gibt es viele kostenlose Libraries und Tools, mit denen man auch ausgefeiltere Projekte angehen kann.
  8.  Popularität Canvas erfreut sich einer stetig steigenden Popularität, deren Ende bisweilen nicht in Sicht ist.

In diesen 8 Punkten wird deutlich, dass HTML5 Canvas sich mitunter deutlich von ähnlichen Umsetzungsmöglichkeiten, wie Flash oder Silverlight abgrenzt.

Canvas empfiehlt sich vor allem, wenn man Gaming- oder Advertising-Applikationen bauen möchte. Auch auf Seiten, die sehr künstlerisch oder dekorativ gestaltet sind, bietet es sich an. Weitere dankbare Einsatzfelder sind Lehrseiten oder Datenrepräsentationen.

Wenn das für euch interessant klingt, dann könnt ihr bei Ivaylo Gerchev die ersten Schritte mit HTML5 Canvas in einem Tutorial lernen.

Aufmacherbild: Photo frame templates. White canvas background von Shutterstock / Urheberrecht: Banana Republic images

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -