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

Uw browser ondersteunt de canvas-tag niet.

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

Probeer het zelf

Voorbeeld 2

Alle globalCompositeOperation-eigenschapswaarden:

Probeer het zelf

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.