Attribut globalCompositeOperation du canvas HTML
Définition et utilisation
globalCompositeOperation Définit ou retourne comment dessiner une image source (nouvelle) sur une image cible (existante).
Image source = Dessin que vous prévoyez de placer sur le canevas.
Image cible = Dessin que vous avez déjà placé sur le canevas.
Exemple
Exemple 1
Tracez des rectangles avec différentes valeurs de globalCompositeOperation. Le rectangle rouge est l'image cible. Le rectangle bleu est l'image source :
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);
Exemple 2
Toutes les valeurs de l'attribut globalCompositeOperation :
Syntaxe
context.globalCompositeOperation="source-in";
Valeur de l'attribut
| Valeur | Description |
|---|---|
| source-over | Par défaut. Afficher l'image source sur l'image cible. |
| source-atop | Afficher l'image source en haut de l'image cible. La partie de l'image source située en dehors de l'image cible est invisible. |
| source-in | Afficher l'image source dans l'image cible. Seulement une partie de l'image source à l'intérieur de l'image cible sera affichée, et l'image cible est transparente. |
| source-out | Afficher l'image source en dehors de l'image cible. Seulement une partie de l'image source en dehors de l'image cible sera affichée, et l'image cible est transparente. |
| destination-over | Afficher l'image cible au-dessus de l'image source. |
| destination-atop | Afficher l'image cible en haut de l'image source. La partie de l'image cible en dehors de l'image source ne sera pas affichée. |
| destination-in | Afficher l'image cible dans l'image source. Seulement la partie de l'image cible dans l'image source sera affichée, l'image source est transparente. |
| destination-out | Afficher l'image cible en dehors de l'image source. Seulement la partie de l'image cible en dehors de l'image source sera affichée, l'image source est transparente. |
| lighter | Afficher l'image source + l'image cible. |
| copy | Afficher l'image source. Ignorer l'image cible. |
| xor | Combiner l'image source et l'image cible en utilisant l'opérateur XOR. |
Détails techniques
| Valeur par défaut : | source-over |
|---|
Support du navigateur
Les numéros dans le tableau indiquent la version du navigateur qui prend en charge cette propriété pour la première fois.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.
