HTML canvas globalCompositeOperation-Eigenschaft
Beispiele
Verwenden Sie verschiedene Werte für globalCompositeOperation, um Rechtecke zu zeichnen. Das rote Rechteck istdas Zielbild, und das blaue Rechteck istdas Quellbild：
source-over
destination-over
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);
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);
Selbst ausprobieren »
Browser-Unterstützung
Internet Explorer 9, Firefox, Opera, Chrome und Safari unterstützen die globalCompositeOperation-Eigenschaft.
Hinweis:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.
Definition und Verwendung
Die Eigenschaft globalCompositeOperation legt fest oder gibt zurück, wie ein Quellbild (neues Bild) auf ein Zielbild (vorhandenes Bild) gezeichnet wird.
Quellbild =Die Zeichnung, die Sie auf das Canvas setzen möchten.
Zielbild =Die Zeichnung, die Sie bereits auf das Canvas gesetzt haben.
| Standardwert: | source-over |
|---|---|
| JavaScript-Syntax: | context.globalCompositeOperation="source-in"; |
Eigenschaftswerte
| Wert | Beschreibung |
|---|---|
| source-over | Standard. Aufdem Zielbilddas Quellbild anzeigen.。 |
| source-atop | InÜber dem Zielbilddas Quellbild anzeigen.。Der Teil des Quellbildes,gelegenaußerhalb des Zielbildes,ist nicht sichtbar. |
| source-in | InIm Zielbildanzeigendas Quellbild.. Nurdas Zielbildinnerhalbdes Quellbildswird der Teil angezeigt,das Zielbildist transparent. |
| source-out | InAußerhalb des Zielbildsanzeigendas Quellbild.. Nurdas Zielbildaußerhalbdes Quellbildeswird der Teil angezeigt,das Zielbildist transparent. |
| destination-over | InAuf dem Quellbildanzeigendas Zielbild.。 |
| destination-atop | InÜber dem Quellbildanzeigendas Zielbild.。Der Teil des Zielbildesbefindet sichaußerhalb des Quellbildsist nicht sichtbar. |
| destination-in | InIm Quellbildanzeigendas Zielbild.. Nurdas Quellbildinnerhalbdes ZielbildsTeil wird angezeigt,das Quellbildist transparent. |
| destination-out | InAußerhalb des Quellbildswirddas Zielbild angezeigt.. Nurdas Quellbildaußerhalbdes Zielbildsliegende Teil wird angezeigt,das Quellbildist transparent. |
| lighter | Anzeigendes Quellbilds + und des Zielbilds.。 |
| copy | Anzeigendes Quellbilds.. Ignorierendes Zielbilds.。 |
| xor | Mithilfe der XOR-Operation,das Quellbildundund das Zielbildwerden kombiniert. |
HTML-Canvas-Referenzhandbuch Weitere Erweiterungen