<canvas> - Anwendungen / Beispiele
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.
Reflexion (Klasse 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.
Analog-Uhr
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.
Grafik speichern
Sicherlich gibt es Gelegenheiten, zu denen das gerade gerenderte Bild gespeichert werden muss. Folgender Workaround kann dabei helfen.
Grafik speichern 2 (Ajax, toDataURL)
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.
7-Segment-Anzeige
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.
Fortschrittsanzeige
Mit Hilfe von JavaScript (JS) und dem HTML 5 - Element <canvas>
wurde eine kreisrunde Fortschrittsanzeige umgesetzt. Die Funktionsweise und Konfigurationsmöglichkeiten
werden hier vorgestellt.
Farbfilter
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.
Regelmäßíge Vielecke und Polygramme
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
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.