Canvas globalCompositeOperation egenskap

Canvas-referencehandbok

Definition och användning

globalCompositeOperation Egenskapsinställningar eller returnerar hur en källa (ny) ritning ska målas upp på en mål (försatt) ritning.

Källbild = Du planerar att placera ritningen på canvasen.

Målbilden = Du har redan placerat ritningen på canvasen.

Exempel

Exempel 1

Rita rektangel med olika värden av globalCompositeOperation. Den röda rektangeln är målbilden. Den blå rektangeln är källbilderna:

　　　　　source-over 　　　　　　　　　　　　destination-over

Din webbläsare stöder inte canvas-taggen.

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);

Prova själv

Exempel 2

Alla globalCompositeOperation-attributvärden:

Prova själv

Syntaks

context.globalCompositeOperation="source-in";

Attributvärde

Värde Beskrivning
source-over Standard. Visa källbild på målbilden.
source-atop Visa källbild ovanpå målbild. Delar av källbild som ligger utanför målbilden är osynliga.
source-in Visa källbild inom målbild. Endast källbildens delar inom målbilden visas, målbild är transparent.
source-out Visa källbild utanför målbild. Endast källbildens delar utanför målbilden visas, målbild är transparent.
destination-over Visa målbild ovanpå källbild.
destination-atop Visa målbild ovanpå 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.
ligare Visa källbild + målbild.
copy Visa källbild. Ignorera målbild.
xor Kombinera källbild och målbild genom att använda XOR-operation.

Tekniska detaljer

Standardvärde: source-over

Webbläsarstöd

Tal i tabellen anger den första webbläsarversionen som helt stöder egenskapen.

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 tidigare versioner stöder inte <canvas>-elementet.

Canvas-referencehandbok