HTML canvas globalCompositeOperation-eigenschap
Definitie en gebruik
globalCompositeOperation
Eigenschapsinstellingen of retourneren hoe een bron (nieuwe) afbeelding wordt getekend op een doel (bestaande) afbeelding.
Bronbeeld = De tekening die u van plan bent te plaatsen op het canvas.
Doelbeeld = De tekening die u al op het canvas heeft geplaatst.
Voorbeeld
Voorbeeld 1
Teken rechthoeken met verschillende globalCompositeOperation-waarden. 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. De bronafbeelding wordt weergegeven op het doelbeeld. |
source-atop | De bronafbeelding wordt weergegeven boven het doelbeeld. Het deel van de bronafbeelding buiten het doelbeeld is niet zichtbaar. |
source-in | De bronafbeelding wordt weergegeven binnen het doelbeeld. Alleen het deel van de bronafbeelding binnen het doelbeeld wordt weergegeven, het doelbeeld is transparent. |
source-out | De bronafbeelding wordt weergegeven buiten het doelbeeld. Alleen het deel van de bronafbeelding buiten het doelbeeld wordt weergegeven, het doelbeeld is transparent. |
destination-over | Display the target image above the source image. |
destination-atop | Display the target image on top of 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.