Canvas-Attribut globalCompositeOperation

Canvas-Referenzhandbuch

Definition und Verwendung

globalCompositeOperation Eigenschaftseinstellungen oder Rückgabe, wie eine Quelle (neue) Zeichnung auf ein Ziel (bereits vorhandenes) Bild gezeichnet wird.

Quellobbild = Sie planen auf dem Canvas zu platzende Zeichnung.

Zielbild = Sie haben auf dem Canvas platzierte Zeichnung.

Beispiel

Beispiel 1

Mit verschiedenen Werten von globalCompositeOperation Rechtecke zeichnen. Das rote Rechteck ist das Zielbild. Das blaue Rechteck ist das Quellobbild:

　　　　　source-over 　　　　　　　　　　　　destination-over

Ihr Browser unterstützt das canvas-Tag nicht.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);

Probieren Sie es selbst aus

Beispiel 2

Alle globalCompositeOperation-Attributwerte:

Probieren Sie es selbst aus

Syntax

context.globalCompositeOperation="source-in";

Attributwert

Wert Beschreibung
source-over Standard. Zeige das Quellbild auf dem Zielbild.
source-atop Zeige das Quellbild auf dem Kopf des Zielbildes. Der Teil des Quellbildes, der außerhalb des Zielbildes liegt, ist unsichtbar.
source-in Zeige das Quellbild im Zielbild. Nur der im Zielbild liegende Teil des Quellbildes wird angezeigt, das Zielbild ist transparent.
source-out Zeige das Quellbild außerhalb des Zielbildes. Nur der außerhalb des Zielbildes liegende Teil des Quellbildes wird angezeigt, das Zielbild ist transparent.
destination-over Zeige das Zielbild über dem Quellbild.
destination-atop Zeige das Zielbild auf dem Kopf des Quellbildes. Der außerhalb des Quellbildes liegende Teil des Zielbildes wird nicht angezeigt.
destination-in Zeige das Zielbild im Quellbild. Nur der im Quellbild liegende Teil des Zielbildes wird angezeigt, das Quellbild ist transparent.
destination-out Zeige das Zielbild außerhalb des Quellbildes. Nur der außerhalb des Quellbildes liegende Teil des Zielbildes wird angezeigt, das Quellbild ist transparent.
heller Zeige das Quellbild + das Zielbild.
kopieren Zeige das Quellbild. Ignoriere das Zielbild.
xor Verwenden Sie die XOR-Operation, um die Quelle und das Zielbild zu kombinieren.

Technische Details

Standardwert: source-over

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browser-Version an, die diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Anmerkung:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.

Canvas-Referenzhandbuch