Dieser Bereich soll dazu dienen, Beispiele und Anwendungen vorzustellen, in denen das <canvas>-Element zum Einsatz kommt.
Weitere Beispiele/Anwendungen, die ich Rahmen meiner Tätigkeiten auf tutorials.de zur Verfügung gestellt habe, finden sich hier.
qpReflexion
)Um Grafiken und Bilder aufzuwerten, werden sie häufig mit einer Reflexion versehen. Das Orginalbild wird dazu vertikal gespiegelt und nach unten ausgefadet. Um derartiges Verhalten zu realisieren, kann das <canvas>-Element verwendet werden. Um dem Internet Explorer gerecht zu werden, kann hier das gleiche durch die Verwendung der filter-Eigenschaft umgesetzt werden.
Mit qpReflexion wird eine Klasse vorgestellt, die oben beschriebenes Verhalten mit JavaScript umsetzt.
Ein Standardbeispiel für Anwendungen mit dem <canvas>-Element ist sicherlich die Analog-Uhr, da hier das Auflösen der eckigen und rechtwickligen Strukturen deutlich wird. Das Beispiel zeigt aber auch, wie Animationen mit dem neuen Element möglich werden.
Sicherlich gibt es Gelegenheiten, zu denen das gerade gerenderte Bild gespeichert werden muss. Folgender Workaround kann dabei helfen.
Diese
Anwendung
wird nur theoretisch abgehandelt. Sie beschäftigt sich mit der Vorgehensweise, den
data:
-URL eines <canvas>-Elements mittels Ajax an den Server zu übermitteln,
daraus ein Bild zu erzeugen und zu speichern.
Diese Anwendung zeigt die Ansteuerung einer 7-Segment-Anzeige. Werden mehr Anzeigen kombiniert, können damit Counter, Uhren oder sonstige Elemente erstellt werden, die zur Anzeige von Ziffern und Zahlen benötigt werden.
Mit Hilfe von JavaScript (JS) und dem HTML 5 - Element <canvas>
wurde eine kreisrunde Fortschrittsanzeige umgesetzt. Die Funktionsweise und Konfigurationsmöglichkeiten
werden hier vorgestellt.
Die Anwendung
zeigt, wie mit Hilfe des canvas
-Elements und der Methoden
getImageData und putImageData
verschiedene Filter auf ein Bild angewendet werden können. Berücksichtigt werden unterschiedliche
Sepia-Filter, Graufilter sowie ein Posterize-Filter. Ausserdem ist es möglich, die Sättigung
eines Bildes über einen Regler einzustellen.
Inspiriert durch einen Artikel vom 03. Juni 2009 auf
ajaxschmiede.de
wurde ein Script
entwickelt, mit dessen Hilfe regelmäßige Vielecke und Polygramme in ein
<canvas>
-Element gezeichnet werden können.
Tangram ist ein altes chinesisches Legespiel, das Anfang des 19-ten Jahrhunderts auch in Europa und Amerika Verbreitung fand. Ziel des Spiels ist es, aus den sieben Einzelfiguren ein Quadrat zu legen.
Die Idee, das Spiel in einer
Online-Variante
zur Verfügung zu stellen, wurde aufgrund einer Nachfrage geboren,
die mir im Rahmen dieses <canvas>
-Projekts gestellt wurde.
Das HTML5-Element <canvas>
enthält keine Methode zum Blurren. Soll die
Funktionalität hinzugefügt werden, muss hierfür eine eigene Routine implementiert werden.
Hier wird eine mögliche Umsetzung vorgestellt.
Das hier vorgestellte Script ermöglicht das Zeichnen von Rechtecken mit abgerundeten Ecken. Es stehen Routinen zum Erstellen gefüllter Elemente sowie zum Zeichnen von Umrisslinien zur Verfügung. Die Benutzung ist an die Methoden fillRect und strokeRect angelehnt.
Das <canvas>
-Element stellt gemäß HTML5-Spezifikation
ein Text-Modul zur Verfügung. Aktuelle Browser unterstützen das mittlerweile nativ. Für Internet Explorer vor Version 9 und
sonstige ältere Browser steht das Script canvas.text zur Verfügung,
das die Funktionalität nachbildet.
Bedauerlicher Weise stellt das Modul lediglich die Funktionalität für einzeilige Texte zur Verfügung. Mehrzeilige Inhalte bleiben außen vor und müssen selbst implementiert werden.
Mit dem hier vorgestellten jQuery-PlugIn dieses Manko behoben. Neben der Multiline-Funktionalität werden einige zusätzliche Features wie Textausrichtung oder Drehung um unterschiedliche Rotationspunkte integriert.