Beispiel
Zeichnen Rechtecke mit zwei verschiedenen global Werte. Rote Rechtecke sind dasZielbild.Blaue Rechtecke sindQuellbilder:
Quelle-over
Ziel-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);
Versuch es selber " Browser-Unterstützung
Internet Explorer 9, Firefox, Opera, Chrome und Safari die global Eigenschaft unterstützen.
Hinweis: Internet Explorer 8 und früheren Versionen nicht unterstützen das <canvas> Element.
Definition und Verwendung
Die global Eigenschaft legt gibt zurück, wie eine Quelle (neu) Bild auf ein Ziel gezogen werden (vorhandene) Bild.
class = "notranslate" source image = Zeichnungen Sie sind auf die Leinwand zu bringen.
destination image = Zeichnungen , die bereits auf die Leinwand gebracht werden.
| Standardwert: | Quelle-over |
|---|---|
| JavaScript-Syntax: | context.globalCompositeOperation="source-in"; |
Immobilienwerte
| Wert | Beschreibung | Spiel es |
|---|---|---|
| source-over | Standard. Zeigt das Quellbild über das Zielbild | Spiel es " |
| source-atop | Zeigt das Quellbild auf dem Zielbild. Der Teil desQuellbildes, die außerhalb desZielbildesist , ist nicht gezeigt | Spiel es " |
| source-in | Zeigt das Quellbild in das Zielbild. Nur der Teil desQuellbildes, die in demZielbildist gezeigt, und dasZielbildist transparent | Spiel es " |
| source-out | Zeigt das Quellbild aus dem Zielbild. Nur der Teil desQuellbildesAUSSERHALB desZielbildesist, gezeigt, und dasZielbildist transparent | Spiel es " |
| destination-over | Zeigt das Zielbild über das Quellbild | Spiel es " |
| destination-atop | Zeigt das Zielbild auf der Oberseite des Quellbildes. Der Teil desZielbildes, die außerhalb desQuellbildesist nicht dargestellt ist | Spiel es " |
| destination-in | Zeigt das Zielbild in das Quellbild. Nur der Teil desZielbildes, das innerhalb desQuellbildesgezeigt ist , und dasQuellbildist transparent | Spiel es " |
| destination-out | Zeigt das Zielbild aus dem Ursprungsbild. Nur der Teil desZielbildes, das außerhalb desQuellbildist gezeigt, und dasQuellenbildist 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 eine Exklusiv - ODER mit dem Zielbild unter Verwendung von | Spiel es " |
Beispiel
Alle globalEigenschaftsWerte:
Quelle-over:
Quelle-Spitze:
Quelle-in:
Quelle-out:
Ziel-over:
Ziel-Spitze:
Ziel-in:
Ziel-out:
leichter:
Kopieren:
xor: