“The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.”

Das Canvas-Element wird irgendwo auf der Seite platziert und tut selbst erst mal gar nichts:

<canvas id="canvas" ></canvas>

Das was dieses Element so speziell macht, ist die damit verknüpfte JavaScript-API: Man kann Linien und Kästchen zeichnen, Bilder und Text dort hineinmalen, mit Schatteneffekten versehen und transformieren.

In diesem Beispiel werden wir zunächst einen Text auf unsere Leinwand schreiben. Dazu benötigt man zunächst den Context des Canvas (den Parameter “2d” muss man immer mitgeben):

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

Dann können wir in den Context etwas schreiben:

context.shadowColor = "#440a0a";
context.shadowOffsetX = 100;
context.shadowOffsetY = 100;
context.shadowBlur = 10;
context.fillStyle = "#0a0a0a";  
context.font = "bold 100px sans-serif"; 
context.textAlign = "center"; 
context.textBaseline = "middle";
context.fillText("Amsterdam", width / 2 - 100, height / 2 - 100);

Wir setzen eine Farbe, Position und Verschwommenheitswert (shadowBlur) für den Schatten, bestimmen dann wie der Text geschrieben werden soll und schreiben den Text am Ende in den Context. In diesem Fall hat der Text die gleiche Farbe wie der Hintergrund, so dass wir tatsächlich nur den verschwommenen Schatten sehen können – was für einen netten Effekt sorgt.

Der nächste Schritt besteht darin, Bilder in das Canvas zu malen, die darüberhinaus auch gleich noch animiert werden sollen. Animation im Canvas-Element bedeutet ganz einfach alle paar Millisekunden den kompletten Inhalt in leicht veränderter Form neu zu zeichnen. Man erreicht dies über setTimeout oder wie im Beispiel über setInterval:

setInterval(draw, 10);

Zuvor wurden zunächst 20 Objekte erzeugt, die ein Bild enthalten und zusätzliche Parameter erhalten können. Diese Parameter werden zunächst in der initialize-Methode initialisiert, um den Bildern eine Richtung, Orientierung, Initialposition und -rotation zu geben:

function initialize(image) {
    image.rot = Math.random() * 360;
    var xOrientation = (Math.ceil(0.5 - Math.random()) - 0.5) * 2;
    var yOrientation = (Math.ceil(0.5 - Math.random()) - 0.5) * 2;
    image.x = xOrientation > 0 ? width : -240;
    image.y = yOrientation > 0 ? height : -240;
    image.dirX = xOrientation * -1 * Math.random();
    image.dirY = yOrientation * -1 * Math.random();
}

Dann wird wie oben erwähnt die draw-Funktion alle 10 Millisekunden aufgerufen. Dort wird immer erst der gesamte Zeichenbereich gelöscht und anschließend neu gezeichnet. Dabei zeichnen wir zunächst den bereits beschriebenen Schriftzug. Dann wir innerhalb einer Schleife die Position und Drehung für jedes Bild neu berechnet und dann das Bild in das Canvas gezeichnet.

Wichtig ist hier das Prinzip zu verstehen, wie beim Canvas-Element transformiert wird: Es existiert eine Transformationsmatrix, die mit den entsprechenden Befehlen geändert wird. Danach wird beim Zeichnen eines Objekte in das Canvas diese Matrix auf das zu zeichnende Element angewendet. Zusätzlich gibt es einen Stack für Transformationsmatrizen (und Canvas-Attribute), den man verwenden kann, wenn man so wie in diesem Beispiel mehrere Elemente unterschiedlich transformieren möchte.

amsterdam[i].x += amsterdam[i].dirX;
amsterdam[i].y += amsterdam[i].dirY;
amsterdam[i].rot = (amsterdam[i].rot + 1) % 360;
context.save();
context.translate(amsterdam[i].x + 120, amsterdam[i].y + 120);
context.rotate((2 * Math.PI / 360) * amsterdam[i].rot);
context.translate(-(amsterdam[i].x + 120), -(amsterdam[i].y + 120));
context.drawImage(amsterdam[i].image, amsterdam[i].x, amsterdam[i].y);
context.restore();

Um jedes Bild einzeln drehen zu können ist folgendes Vorgehen notwendig:

1. Der aktuelle Zustand des Canvas-Contextes wird abgespeichert. Der Zustand enthält nicht das was im Moment im Canvas zu sehen ist, sondern die aktuelle Transformationsmatrix und gesetzte Attribute.
2. Die Transformationsmatrix wird geändert und der Ursprungspunkt des Koordinatensystems zum Bildmittelpunkt verschoben.
3. Die Transformationsmatrix wird für eine Rotation geändert.
4. Das Koordinatensystem wird wieder zurückverschoben.
5. Das Bild wird tatsächlich auf das Canvas gezeichnet.
6. Der vorherige Zustand des Canvas wird wiederhergestellt, damit die nächste Drehung wieder korrekt abgebildet werden kann.

Das ganze machen wir alle 10 ms für jedes Bild und dadurch entsteht dann die Animation, die alle Bilder durch das Fenster rotieren lässt. Hinter folgendem Link befindet sich das hier beschriebene Beispiel (funktioniert natürlich nur mit einem HTML5-fähigen Browser):

Fliegende Bilder in HTML5

HTML5 besteht natürlich aus noch viel mehr als nur dem Canvas-Element. Dive Into HTML5 ist ein ausgezeichnetes englisches Tutorial, das die wichtigsten Neuerungen von HTML5 verständlich vorstellt.

Von Lightbox-ähnlichen JavaScript-Bibliotheken gibt’s Unmengen, so dass es wahrscheinlich für jeden Anwendungszweck eine Variante gibt, wenn man sie nur finden würde.

Eine tolle Übersicht bietet “The Lightbox Clones Matrix“, wo mittlerweile mehr als 40 Lightbox-Clones gelistet werden, die sich auch nach Kategorien wie “zugrundeliegendes JavaScript-Framework” oder deren Features (kann Bilder/IFrames/Flash anzeigen) filtern lassen.

Da bisher jeder Hersteller von Widgets seine eigene Variante hatte, um so etwas zu bauen mussten Programmierer ihre Widgets für jede Plattform anpassen oder komplett umbauen. An dieser Stelle kommt die Universal Widget API von Netvibes ins Spiel, die es sich zur Aufgabe gemacht hat, ein einheitliches Framework und eine API zu schaffen, mittel dessen Widgets auf vielen Verschiedenen Systemen lauffähig gemacht werden können. Aktuell werden unterstützt iGoogle, Windows Vista, Apple Dashboard, Live.com, iPhone, Opera, MySpace und die Integration in Blogs.

Als Beispiel habe ich ein kleines Widget gebastelt, was das jeweils aktuellste Bild aus dem RSS-Feed von FFFFOUND! darstellt.

Im Prinzip besteht ein Widget für die UWA aus einer einzelnen XHTML-Datei, die sich aus 5 wesentlichen Teilen zusammensetzt:

Der Header
Im Header werden Metainformationen wie der Titel des Widgets, der Autor, eine Beschreibung und ähnliche Dinge eingetragen.

<meta name="author" content="Zustandsforschung" />
<meta name="description" content="image bookmarking" />
<meta name="apiVersion" content="1.0" />
<meta name="autoRefresh" content="20" />
<meta name="debugMode" content="true" />

<link rel="stylesheet" type="text/css"
href="http://www.netvibes.com/themes/uwa/style.css" />
<script type="text/javascript"
src="http://www.netvibes.com/js/UWA/load.js.php?env=Standalone"></script>

<title>FFFFOUND!</title>
<link rel="icon" type="image/png"
href="http://ffffound.com/favicon.ico" />


Die Konfiguration
Mittels eines speziellen XML-Formates wird dann die Konfiguration definiert, wobei man Checkboxen, Eingabefelder oder Dropdowns anlegen kann. Die vom Benutzer dort eingetragenen Werte können dann über eine API wieder ausgelesen und verwendet werden.

Bei meinem Beispiel hat’s keine Konfiguration – das geht auch und sieht dann so aus:

<widget:preferences>
</widget:preferences>


Styles
Da es sich bei einem UWA-Widget letztendlich um HTML handelt, kann das Widget mit CSS gestylt werden:

<style type="text/css">
.ffffound {
text-align:center;
}
.ffffound img {
max-width:250px;
}
</style>


JavaScript
Der Hauptteil des Widgets ist ein JavaScript: Hier muss man eine widget.onLoad-Funktion schreiben, die beim Start des Widgets aufgerufen wird. Ansonsten kann man hier so ziemlich alles machen, was man mit JavaScript so alles machen kann. Außerdem gibt’s noch eine API für den vereinfachten Zugriff auf AJAX-Funktionen und ein paar DOM-Erweiterungen.

<script type="text/javascript">
var FFFFound = {};

FFFFound.feedUrl = "http://feeds.feedburner.com/ffffound/everyone";

FFFFound.display = function(feed) {
widget.log(feed);
widget.log(feed.items[0].content);
widget.setBody("<div class=\"ffffound\">"
+feed.items[0].content+"</div>");
}

widget.onLoad = function() {
UWA.Data.getFeed(FFFFound.feedUrl, FFFFound.display);
}
</script>


Body
Im Body definiert man mit HTML die Grundstruktur des Widgets. Meistens wird man aber eher alles wichtige per JavaScript hinzugefügt und der Body sieht dann so aus:

<body>
<p>Loading... </p>
</body>


Das Endergebnis bzw. den kompletten Sourcecode für das Widget könnt ihr euch hier mal anschauen: ffffound-Widget. Und es gibt natürlich auch hierfür ein tolles Cheat-Sheet, wo alles draufsteht, was man wissen muss, um ein UWA-Widget zu erstellen.

Cheat Sheets for Front-end Web Developers

Sieh dazu auch meine anderen Posts zum Thema “Cheat-Sheets“.

[via stejan]