Dokumentation (canvas.quaese.de)
 

<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.

Blur für <canvas>

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.

Runde Ecken

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.

Multiline für <canvas> (jQuery PlugIn)

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.

 
Dokument zuletzt modifiziert: 12.12.2011, 21:47 Uhr
<canvas>-Dokumentation Ver. 0.1 | Quaese, Jan 2008 | Datenschutz | Sitemap