Html 5 und Canvas

Das Canvas-Element ist Bestandteil von HTML5 und gestattet ein dynamisches Rendern von Bitmap-Grafiken. Was der Welt des Web´s einen ganz neuen Ansatz ermöglicht. Als Beispiel können so keine Bilder mehr von der Webseite gezogen werden da diese direkt im Browser gerendert ausgegeben werden, die Ladezeiten der Webseite sind deutlich niedriger und noch viele weitere Vorteile die für Canvas sprechen.

Canvas umfasst einen in HTML-Code mit Höhen- und Breiten-Attributen definierten Bereich, in den gezeichnet werden kann. Innerhalb von JavaScript stehen 2D-Zeichenfunktionen zur Verfügung, die dynamisch erzeugte Zeicheninhalte innerhalb des Canvas-Bereichs gestatten.

Es lassen sich aber auch Interaktionen in diesem Canvas-Bereich ausführen. Mithilfe von JavaScript lassen sich alle denkbar mögliche Ereignisse, wie z.B. skalieren, drehen, einfügen usw. direkt vom Benutzer selbst, erzeugen und ausführen.

Als Beispiel möchte ich hier kurz ein Kundenprojekt das von uns durchgeführt wurde, vorstellen.

Aufgabe war in HTML 5 und mithilfe von Canvas einen Konfigurator zu erstellen, mit dem der Kunde sich einen eigenen "Autobikini" erstellen kann.
(Zur Definition eines "Autobikinis", damit ist ein Überzug der seitlichen Aussenspiegel eines Pkw´s gemeint. Meist mit Flaggen geziert.)

Der Kunde soll in diesem Canvas-Bereich ein Bild seiner Wahl hochladen können, dieses skalieren und verschieben. Weiterhin hat der Kunde die Möglichkeit einen Text über das Bild zu legen, diesen farblich anzupassen und eine vordefinierte Schriftart zu wählen. Natürlich lässt sich auch die Schrift skalieren und platzieren wie gewünscht.

Lange Rede, kurzer Sinn. Hier der direkte Link zum fertiggestellten Projekt:
www.autobikini.com/autobikini-konfigurator

Für das oben genannte Projekt, benutzten wir ein bereits vorhandenes Framework: "fabric.js". Dieses interaktive Objekt Framework kann ich nur empfehlen, da fabric.js die Arbeit mit HTML 5 und Canvas sehr erleichtert und schon viele Funktionen bereit hält.

Gerne kannst du uns kontaktieren wenn du Fragen zu Canvas oder dem genannten Projekt hast, oder eben hier direkt kommentieren.

03. Jun 2012

Ein eigenes Drupal Theme zu erstellen ist zumeist der erste Schritt nach der Installation von Drupal (die relativ einfach und schnell durchzuführen ist).…

08. Mai 2012

Wer kennt das nicht?! Du findest endlich eine passende Open-Source-Schriftart die dir in Ihrer Zusammensetzung und Gestaltung voll und ganz zusagt, ziehst…

11. Jun 2013

Drupal ist frei verfügbar (Open Source), flexibel, robust und wird fortwährend von hunderttausenden, passionierten Menschen auf der ganzen Welt…

SAY HELLO
Du hast eine einzigartige Idee? Du gründest ein Unternehmen und benötigst eine Website oder diverse Medien?
Oder hast du eine ganz andere Frage, bei der wir Dir weiterhelfen können?
Wir freuen uns von Dir zu hören