Attribut globalCompositeOperation du canevas
Définition et utilisation
globalCompositeOperation Définir ou retourner la manière dont une image source (nouvelle) est dessinée sur une image cible (existante).
L'image source = Le dessin que vous envisagez de placer sur le canevas.
L'image cible = Le dessin que vous avez déjà placé sur le canevas.
Exemple
Exemple 1
Dessiner 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. Les parties de l'image source situées en dehors de l'image cible ne seront pas visibles. |
| source-in | Afficher l'image source à l'intérieur de l'image cible. Seules les parties de l'image source à l'intérieur de l'image cible seront affichées, l'image cible est transparente. |
| source-out | Afficher l'image source en dehors de l'image cible. Seules les parties de l'image source en dehors de l'image cible seront affichées, 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. Les parties de l'image cible en dehors de l'image source ne seront pas affichées. |
| destination-in | Afficher l'image cible à l'intérieur de l'image source. Seules les parties de l'image cible à l'intérieur de l'image source seront affichées, l'image source est transparente. |
| destination-out | Afficher l'image cible en dehors de l'image source. Seules les parties de l'image cible en dehors de l'image source seront affichées, 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 |
|---|
Prise en charge 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>.
