Canvas globalCompositeOperation-eigenschap
Definitie en gebruik
globalCompositeOperation Eigenschappen instellen of retourneren hoe een bron (nieuwe) afbeelding wordt getekend op een doel (bestaande) afbeelding.
Bronbeeld = U wilt plaatsen tekening op het canvas.
Doelbeeld = U heeft al geplaatste tekening op het canvas.
Voorbeeld
Voorbeeld 1
Tekeningen maken met verschillende waarden van globalCompositeOperation. De rode rechthoek is het doelbeeld. De blauwe rechthoek is de bronafbeelding:
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);
Voorbeeld 2
Alle globalCompositeOperation-eigenschapswaarden:
Syntax
context.globalCompositeOperation="source-in";
Eigenschapswaarde
| Waarde | Beschrijving |
|---|---|
| source-over | Standaard. Toon de bronafbeelding op de doelafbeelding. |
| source-atop | Toon de bronafbeelding bovenop de doelafbeelding. De deel van de bronafbeelding die buiten de doelafbeelding ligt, is niet zichtbaar. |
| source-in | Toon de bronafbeelding binnen de doelafbeelding. Alleen de bronafbeelding die binnen de doelafbeelding ligt, wordt getoond, de doelafbeelding is transparent. |
| source-out | Toon de bronafbeelding buiten de doelafbeelding. Alleen de bronafbeelding die buiten de doelafbeelding ligt, wordt getoond, de doelafbeelding is transparent. |
| destination-over | Toon de doelafbeelding boven de bronafbeelding. |
| destination-atop | Toon de doelafbeelding bovenop de bronafbeelding. De doelafbeelding die buiten de bronafbeelding ligt, wordt niet getoond. |
| destination-in | Toon de doelafbeelding binnen de bronafbeelding. Alleen de doelafbeelding die binnen de bronafbeelding ligt, wordt getoond, de bronafbeelding is transparent. |
| destination-out | Toon de doelafbeelding buiten de bronafbeelding. Alleen de doelafbeelding die buiten de bronafbeelding ligt, wordt getoond, de bronafbeelding is transparent. |
| lichter | Toon de bronafbeelding + doelafbeelding. |
| kopieer | Toon de bronafbeelding. Negeer de doelafbeelding. |
| 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.
