Html 5 und Canvas

hardvisions - 2 Kommentar(e)

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.

Kommentare

Hi.

Ich wollte den Konfigurator eben gespannt ausprobieren, aber er scheint auf der angegebenen Seite nicht mehr zu existieren: http://www.autospiegelflagge.de/autobikini-konfigurator

Existiert davon noch eine andere lauffähige Version/Demo ?

Tatsächlich wurde der Betreiber der Seite vor kurzem gewechselt. Eventuell wird der Konfigurator wieder live geschalten. Wir versuchen aber eine Testumgebung aufzusetzen und posten den Link hier neu.

besten gruß,

David

Neuen Kommentar schreiben

To prevent automated spam submissions leave this field empty.

Filtered HTML

  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.
  • Zulässige HTML-Tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • HTML - Zeilenumbrüche und Absätze werden automatisch erzeugt.

Plain text

  • Keine HTML-Tags erlaubt.
  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.
  • HTML - Zeilenumbrüche und Absätze werden automatisch erzeugt.
02. Nov 2012
- 2 Kommentar(e)

Wer kennt das nicht, immer und überall erreichbar zu sein und dementsprechend auch seine Mails immer im Auge zu haben?! Nach Start der Mail App öffnet sich…

03. Jun 2012
- 8 Kommentar(e)

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
- 0 Kommentar(e)

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

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