Information Technology Reference
In-Depth Information
Abbildung 5.30:
Werte des »globalCompositeOperation«-Attributs
Der Kreis steht damit für
source
(
A
), das Rechteck für
destination
(
B
). Bei der
Erklärung der einzelnen Methoden greifen wir besser auf die Bezeichnungen
von Porter-Duff zurück, da sie wesentlich intuitiver sind und genauer beschrei-
ben, was eigentlich passiert.
Bei
source-over
wird
A
über
B
gezeichnet, bei
source-in
nur jener Teil von
A,
der
sich in
B
befindet, bei
source-out
nur jener Teil von
A,
der sich außerhalb von
B
befindet, und bei
source-atop
sowohl
A
als auch
B
mit der Einschränkung, dass
nur jener Teil von
A
gezeichnet wird, der
B
überlappt. In der zweiten Zeile wird
das Ganze einfach umgedreht - die wörtliche Erklärung kann damit wohl entfal-
len.
Die Methode
lighter
addiert Farben im Überlappungsbereich und hellt sie da-
mit auf,
copy
eliminiert
B
und zeichnet nur
A,
und
xor
entfernt die Schnittmenge
von
A
und
B
. Das Fragezeichen deutet an, dass ähnlich wie bei der
getContext()
-
Methode auch herstellerspezifische Compositing-Operationen erlaubt sind.
Leider ist die Compositing-Implementierung noch in keinem Browser vollstän-
dig, weshalb es schwierig ist, alle Methoden sinnvoll zu präsentieren. Greifen
wir zwei heraus, und sehen wir uns Beispiele für die Verwendung der Opera-
tionen
destination-in
und
lighter
an.