Propriété HTML canvas globalCompositeOperation
Exemple
Dessinez des rectangles en utilisant deux valeurs globaleCompositeOperation différentes. Les rectangles rouges sont des images de destination . Les rectangles bleus sont des images source :
source sur
destination-sur
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);
Prise en charge du navigateur
Internet Explorer 9, Firefox, Opera, Chrome et Safari prennent en charge la propriété globalCompositeOperation.
Définition et utilisation
La propriété globalCompositeOperation définit ou renvoie la manière dont une image source (nouvelle) est dessinée sur une image de destination (existante).
image source = dessins que vous êtes sur le point de placer sur la toile.
image de destination = dessins déjà placés sur la toile.
| Valeur par défaut: | source sur |
|---|---|
| Syntaxe JavaScript : | contexte .globalCompositeOperation="source-in" ; |
Valeurs de propriété
| Value | Description | Play it |
|---|---|---|
| source-over | Default. Displays the source image over the destination image | |
| source-atop | Displays the source image on top of the destination image. The part of the source image that is outside the destination image is not shown | |
| source-in | Displays the source image in to the destination image. Only the part of the source image that is INSIDE the destination image is shown, and the destination image is transparent | |
| source-out | Displays the source image out of the destination image. Only the part of the source image that is OUTSIDE the destination image is shown, and the destination image is transparent | |
| destination-over | Displays the destination image over the source image | |
| destination-atop | Displays the destination image on top of the source image. The part of the destination image that is outside the source image is not shown | |
| destination-in | Displays the destination image in to the source image. Only the part of the destination image that is INSIDE the source image is shown, and the source image is transparent | |
| destination-out | Displays the destination image out of the source image. Only the part of the destination image that is OUTSIDE the source image is shown, and the source image is transparent | |
| lighter | Displays the source image + the destination image | |
| copy | Displays the source image. The destination image is ignored | |
| xor | The source image is combined by using an exclusive OR with the destination image |
Exemple
Toutes les valeurs de la propriété globalCompositeOperation :