HTML canvas globalCompositeOperation-attribut
Definition og brug
globalCompositeOperation Egenskabsindstilling eller -returnering af, hvordan en kilde (ny) billede tegnes på et mål (allerede eksisterende) billede.
Kilden bilde = Det tegning, du planlægger at placere på canvas.
Målbilledet = Det tegning, du allerede har placeret på canvas.
Eksempel
Eksempel 1
Tegn rektangler med forskellige globalCompositeOperation-værdier. Den røde rektangel er målbilledet. Den blå rektangel er kilden bilde:
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);
Eksempel 2
Alle globalCompositeOperation-attributværdier:
Syntaks
context.globalCompositeOperation="source-in";
Attributværdi
| Værdi | Beskrivelse |
|---|---|
| source-over | Standard. Vis kilden bilde på målbilledet. |
| source-atop | Vis kilden bilde øverst på målbilledet. Den del af kilden bilde uden for målbilledet er usynlig. |
| source-in | Vis kilden bilde inden for målbilledet. Kun den del af kilden bilde inden for målbilledet vises, målbilledet er gennemsigtigt. |
| source-out | Vis kilden bilde uden for målbilledet. Kun den del af kilden bilde uden for målbilledet vises, målbilledet er gennemsigtigt. |
| destination-over | Display the target image above the source image. |
| destination-atop | Display the target image above the source image. The part of the target image outside the source image will not be displayed. |
| destination-in | Display the target image within the source image. Only the part of the target image within the source image will be displayed, and the source image is transparent. |
| destination-out | Display the target image outside the source image. Only the part of the target image outside the source image will be displayed, and the source image is transparent. |
| lighter | Display the source image + target image. |
| copy | Display the source image. Ignore the target image. |
| xor | Combine the source image with the target image using the XOR operation. |
Technical details
| Default value: | source-over |
|---|
Browser support
The numbers in the table indicate the first browser version that fully supports this property.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.
