JavaScript-Techniken bei HTML5 und mehr - JavaScript: Die Universelle Sprache zur Web-Programmierung - page 443

spiegeln. Unter http://downloads.hanser.de inden Sie das Beispiel kap14_27.html für eine
praktische Anwendung.
14.5.1.14■Kompositionen und Clipping
Wenn Sie in einem Canvas -Element mehrere Formen kombinieren wollen, können Sie mit
der Eigenschat globalCompositeOperation die Art der Komposition beeinlussen. Das
betrit im Wesentlichen den Fall, dass sich Formen überdecken. Im Vorgabefall überdeckt
jede neue Form die vorangegangen. Das entspricht dem Wert source-over für die Eigen-
schat globalCompositeOperation . Mit destination-over können Sie die neue Form aber
auch dahinter legen. Die Möglichkeiten gehen aber noch weiter, wobei wir sie hier nur
andeuten. So können Sie festlegen, dass nur überlappende Bereiche angezeigt werden (ent-
weder vom vorderen oder hinteren Objekt) oder nur die Bereiche außerhalb, dass Farben
von überlappenden Bereichen verschieden kombiniert werden, usw.
In den gleichen Kontext fällt das sogenannte Clipping. Das ist die Angabe einer Filtermaske.
Alles, was sich außerhalb dieser Filtermaske beindet, kann weggeschnitten werden. Dazu
müssen Sie bloß einen gewöhnlichen Pfad bzw. eine Form erzeugen und dieses Objekt über
einen anderen Bereich legen. Wenn Sie dann die Methode clip() aufrufen, wird der Inhalt
außerhalb der Filtermaske weggenommen und dieser Bereich transparent gesetzt. Unter
http://downloads.hanser.de zeigt das Beispiel kap14_28.html eine Anwendung.
14.5.1.15■Animationen mit Canvas-Objekten
Mit Canvas -Elementen können Sie auch Animationen erstellen. Allerdings gibt es wenig
Neues hier zu erwähnen, wenn Sie Animationen mit DHTML bereits kennen. Oder anders
ausgedrückt - im Grunde müssen Sie klassische DHTML-Animationen erstellen, denn
Canvas -Elemente wurden im Grunde nicht für Animationen konzipiert. Es ist vielleicht
etwas enttäuschend, aber es gibt aktuell keine speziellen Methoden, die dafür gedacht sind.
Von daher müssen Sie sogar etwas Aufwand betreiben, um die Einschränkungen von
Canvas -Elementen in Hinsicht auf Animationen zu kompensieren. Insbesondere müssen Sie
bei einer Veränderung des Canvas -Bereichs vorhandene Graikelemente beseitigen. Diese
bleiben standardmäßig erhalten, wenn man eine Veränderung zeichnet. Dazu verwenden
Sie am besten die Methode clearRect() , die wir auch bei unseren interaktiven Canvas -
Beispielen verwendet haben. Die Animation selbst wird wie üblich mit - meist rekursiven -
setTimeout() -Aufrufen gestaltet. Das ist altbekannt. Schauen wir uns zum Abschluss der
Behandlung von Canvas -Elementen eine einfache Animation an (kap14_29.js):
Listing 14.56■ Eine Animation mit einem Rechteck
var zeichnenbereich = null;
var i=1;
var j=1;
var zeichnenbereich = null;
var i = 1;
var j = 1;
function zeichnen() {
with (zeichnenbereich) {
clearRect(10, 10, i, j);
strokeRect(10, 10, i++, j++);
}