Canvas globalCompositeOperation egenskab

Canvas referencehåndbog

Definition og brug

globalCompositeOperation Egenskabsindstilling eller returnering af, hvordan en kilde (ny) tegning skal tegnes på mål (allerede eksisterende) tegning.

Kildemålet = Tegningen, du planlægger at placere på canvaset.

Målbilledet = Tegningen, du allerede har placeret på canvaset.

Eksempel

Eksempel 1

Tegner rektangler med forskellige værdier af globalCompositeOperation. Den røde rektangel er målbilledet. Den blå rektangel er kildemålet:

　　　　　source-over 　　　　　　　　　　　　destination-over

Din browser understøtter ikke canvas tagget.

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

Prøv det selv

Eksempel 2

Alle globalCompositeOperation egenskabsværdier:

Prøv det selv

Syntaks

context.globalCompositeOperation="source-in";

Egenskabsværdi

Værdi Beskrivelse
source-over Standard. Vis kildefilen på mål filen.
source-atop Vis kildefilen øverst på mål filen. Del af kildefilen, der ligger uden for mål filen, er usynlig.
source-in Vis kildefilen inden for mål filen. Kun kildefilens del inden for mål filen vil blive vist, mål filen er gennemsigtig.
source-out Vis kildefilen uden for mål filen. Kun kildefilens del uden for mål filen vil blive vist, mål filen er gennemsigtig.
destination-over Vis mål filen oven på kildefilen.
destination-atop Vis mål filen øverst på kildefilen. Mål filens del uden for kildefilen vil ikke blive vist.
destination-in Vis mål filen inden for kildefilen. Kun mål filens del inden for kildefilen vil blive vist, kildefilen er gennemsigtig.
destination-out Vis mål filen uden for kildefilen. Kun mål filens del uden for kildefilen vil blive vist, kildefilen er gennemsigtig.
lighter Vis kildefilen + mål filen.
copy Vis kildefilen. Ignorer mål filen.
xor Brug XOR-operation til at kombinere kilde- og målbilleder.

Tekniske detaljer

Standardværdi: source-over

Browserunderstøttelse

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter denne egenskab.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Bemærk:Internet Explorer 8 og ældre versioner understøtter ikke <canvas>-elementet.

Canvas referencehåndbog