HTML5 in der mobilen Webentwicklung - HTML5-Apps fur iPhone und Android - page 81

Das obige Codebeispiel demonstriert bereits eine einfache Animation. Die Funktion
draw() wird zunächst durch setTimeout() nach 500 ms aufgerufen. Pro Durchgang
wird die Variable i um 10 erhöht, wodurch die beiden Kontrollpunkte von unten nach
oben und umgekehrt laufen.

An dieser Stelle sei erwähnt, dass sich das canvas -Element nicht wirklich zur Erstellung
von Animationen eignet, zumindest nicht, wenn die API aus einem mobilen Browser
heraus benutzt wird. Es gibt viele beeindruckende Beispiele für Desktop-Browser, aller-
dings lässt die Performance auf mobilen Geräten immer noch zu wünschen übrig. Es
stellt zwar kein Problem dar, den Canvas alle 100 ms neu zu zeichnen, allerdings kommt
dadurch keine flüssige Animation zustande.

Durch die Methode clip() kann ein zuvor gezeichneter Pfad in eine sogenannte
Clipping Area, zu Deutsch Guckloch, umgewandelt werden. Die standardmäßige
Zeichenfläche ist rechteckig und hat exakt die Maße des erstellten Canvas. Durch eine
Clipping Area kann eine Form angegeben werden, die als Maske für alle nachfolgenden
Zeichenoperationen dient. Alle Punkte, die sich außerhalb der Clipping Area befinden,
werden nicht auf den Canvas gezeichnet. Das folgende Beispiel demonstriert das, indem
zunächst durch die Methode translate() alle Zeichenoperationen in den Mittel-
punkt des Canvas verschoben werden. ( translate() wird später noch genauer
vorgestellt.) Als Nächstes wird eine kreisförmige Clipping Area erstellt und im Anschluss
ein Rechteck, das dank der Clipping Area leicht kreisförmige Seiten hat:

Bild 2.7: Rechteck mit abgerundeten Seiten.

//center of canvas
ctx.translate(140, 150);

//create clipping
ctx.beginPath();
ctx.arc(0, 0, 100, getRadians(0), getRadians(360), false);
ctx.clip();
//draw to see clipping
ctx.translate( 140, 150);
ctx.fillStyle "rgb(255,0,0)";
ctx.fillRect(10, 120, 260, 60);

2.3.2 Bilder

Mittels der drawImage() -Methode können vorhandene Bilder oder sogar andere
canvas -Elemente in einen Canvas übernommen werden. In den folgenden Abschnitten