Beispiel
Zeichnen Rechtecke mit zwei verschiedenen global Werte. Rote Rechtecke sind das destination images . Blaue Rechtecke sind source images :
Quelle Über
Zielüber
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);
Versuch es selber " Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
| Eigentum | |||||
|---|---|---|---|---|---|
| globalCompositeOperation | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Definition und Verwendung
Die globalEigenschaftsSätze oder Renditen , wie eine Quelle (new) Bild auf ein Ziel gezogen werden (existing) Bild.
Quellbild = Zeichnungen Sie sind etwa auf die Leinwand zu bringen.
Zielbild = Zeichnungen , die bereits auf die Leinwand gebracht werden.
| Standardwert: | Quelle Über |
|---|---|
| JavaScript-Syntax: | context .globalCompositeOperation="source-in"; |
Eigenschaftswerte
| Wert | Beschreibung | Spiel es |
|---|---|---|
| source-over | Standard. Zeigt das Quellbild über das Zielbild | Spiel es " |
| source-atop | Zeigt das Quellbild auf das Zielbild. Der Teil des source image , die außerhalb des ist destination image ist nicht gezeigt | Spiel es " |
| source-in | Zeigt das Quellbild in das Zielbild. Nur der Teil des source image , die in dem IS destination image angezeigt wird , und das destination image ist transparent | Spiel es " |
| source-out | Zeigt das Quellbild aus dem Zielbild. Nur der Teil des source image , das das OUTSIDE ist destination image angezeigt wird , und das destination image ist transparent | Spiel es " |
| destination-over | Zeigt das Zielbild über das Quellbild | Spiel es " |
| destination-atop | Zeigt das Zielbild auf das Quellbild. Der Teil des destination image , die sich außerhalb der IS source image ist nicht gezeigt | Spiel es " |
| destination-in | Zeigt das Zielbild in das Quellbild. Nur der Teil des destination image , die in dem IS source image gezeigt ist , und das source image ist transparent | Spiel es " |
| destination-out | Zeigt das Zielbild aus dem Quellbild. Nur der Teil des destination image , das die OUTSIDE ist source image gezeigt ist , und das source image ist transparent | Spiel es " |
| lighter | Zeigt das Quellbild + das Zielbild | Spiel es " |
| copy | Zeigt das Quellbild. Das Zielbild wird ignoriert | Spiel es " |
| xor | Das Quellbild wird kombiniert , indem ein Exklusiv - ODER mit dem Zielbild unter Verwendung von | Spiel es " |
<Canvas Object