HTML and CSS Reference
In-Depth Information
//scale
ctx.save();
ctx.scale(2,2); //1 is 100%
ctx.fillText('scaled 2x', 75,100);
ctx.restore();
2.3.7 Anordnung
Bislang wurden neue Zeichenoperationen immer auf den Canvas gezeichnet, d. h., die
neue Zeichenoperation zeichnet über die bestehenden. Die bisher verwendete
globalCompositeOperation
war
source-over
, also die Standardeinstellung. Insge-
samt gibt es jedoch zwölf mögliche Werte für die
globalCompositeOperation
, die in
folgender Tabelle kurz vorgestellt werden.
Der aktuelle Stand der Dinge
Ein Test auf aktuellen mobilen Browsern zeigt, dass viele der zwölf Möglichkeiten
entweder noch nicht oder scheinbar fehlerhaft implementiert sind. Dennoch seien diese
Möglichkeiten hier kurz vorgestellt, da das Erreichen einer vollständigen und korrekten
Implementierung im WebKit in den nächsten Monaten als wahrscheinlich gilt.
Folgende Grafiken wurden in OpenOffice gezeichnet, da die Implementierung derzeit zu
lückenhaft ist. Erstes Zeichenobjekt in allen Grafiken ist das blaue Quadrat, die zweite
Zeichenoperation zeichnet den roten Kreis.
Zeichenoperationen
source-over
(Standard)
Neue Formen werden über den aktuellen Inhalt des Canvas gezeichnet.
destination-over
Neue Formen werden hinter den bestehenden Formen gezeichnet. Neue
Formen innerhalb der Fläche bestehender Formen sind daher nicht oder
nur teilweise sichtbar.
source-in
Die neue Form wird nur dort gezeichnet, wo sich neue und alte Form
überlappen. Die restlichen Bereiche werden komplett transparent.
destination-in
Der bestehende Inhalt des Canvas wird für alle Teile übernommen, die
sich mit der neuen Form überlappen. Die restlichen Bereiche werden
komplett transparent.
source-out
Die neue Form wird dort gezeichnet, wo sie sich mit dem bestehenden
Inhalt des Canvas nicht überlappt.
