HTML canvas globalCompositeOperation-attribut
Definition och användning
globalCompositeOperation Egenskapsinställningar eller återgivningar som definierar hur en källa (ny) ritning ska målas upp på en mål (redan existerande) ritning.
Källbild = Den ritning du planerar att placera på canvasen.
Målbild = Den ritning du redan har placerat på canvasen.
Exempel
Exempel 1
Rita rektanglar med olika globalCompositeOperation-värden. Röd rektangel är målbilden. Blå rektangel är källbilden:
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);
Exempel 2
Alla globalCompositeOperation-egenskapsvärden:
Syntaks
context.globalCompositeOperation="source-in";
Egenskapsvärde
| Värde | Beskrivning |
|---|---|
| source-over | Standard. Visa källbild på målbilden. |
| source-atop | Visa källbild ovanpå målbilden. Den del av källbild som ligger utanför målbilden är osynlig. |
| source-in | Visa källbild inom målbilden. Endast den del av källbild som ligger inom målbilden kommer att visas, och målbilden är genomskinlig. |
| source-out | Visa källbild utanför målbilden. Endast den del av källbild som ligger utanför målbilden kommer att visas, och målbilden är genomskinlig. |
| destination-over | Visa målbild över källbild. |
| destination-atop | Visa målbild över källbild. Målbildens delar utanför källbilden visas inte. |
| destination-in | Visa målbild inom källbild. Endast målbildens delar inom källbilden visas, källbild är transparent. |
| destination-out | Visa målbild utanför källbild. Endast målbildens delar utanför källbilden visas, källbild är transparent. |
| lighter | Visa källbild + målbild. |
| copy | Visa källbild. Ignorera målbild. |
| xor | Kombinera källbild och målbild med XOR-operation. |
Tekniska detaljer
| Standardvärde: | source-over |
|---|
Webbläsarstöd
Numrerna i tabellen anger den första webbläsarversionen som helt stöder denna egenskap.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Kommentar:Internet Explorer 8 och äldre versioner stöder inte <canvas>-elementet.
