Exemple
Dessiner des rectangles en utilisant deux valeurs de globalCompositeOperation différentes. Rectangles rouges sont desimages de destination.Rectangles bleus sont desimages de source:
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);
Essayez - le vous - même » support du navigateur
Internet Explorer 9, Firefox, Opera, Chrome et Safari en charge la propriété globalCompositeOperation.
Remarque: Internet Explorer 8 et les versions antérieures, ne supportent pas le <canvas> élément.
Définition et utilisation
Les ensembles de propriétés de globalCompositeOperation ou retourne comment une (nouvelle) image source sont tirés sur une destination d'image (existante).
class = "notranslate" image source = dessins que vous allez placer sur la toile.
destination image = dessins qui sont déjà placés sur la toile.
| Valeur par défaut: | source sur |
|---|---|
| Syntaxe JavaScript: | context.globalCompositeOperation="source-in"; |
propriété valeurs
| Valeur | La description | Joue-le |
|---|---|---|
| source-over | Défaut. Affiche l'image source sur l'image de destination | Joue-le " |
| source-atop | Affiche l'image source sur le dessus de l'image de destination. La partie del'image sourcequi est en dehors del'image de destinationnon représenté | Joue-le " |
| source-in | Affiche l'image source dans l'image de destination. Seule la partie del'image sourcequi est dansl'image de destinationest affichée, etl'image de destinationest transparente | Joue-le " |
| source-out | Affiche l'image source sur l'image de destination. Seule la partie del'image sourcequi est en dehors del'image de destinationest affichée, etl'image de destinationest transparente | Joue-le " |
| destination-over | Affiche l'image de destination sur l'image source | Joue-le " |
| destination-atop | Affiche l'image de destination sur le dessus de l'image source. La partie del'image de destinationqui se trouve en dehors del'image sourceest non représentées | Joue-le " |
| destination-in | Affiche l'image de destination pour l'image source. Seule la partie del'image de destinationqui se trouve dansl'image sourceest affichée, etl'image sourceest transparente | Joue-le " |
| destination-out | Affiche l'image de destination de l'image source. Seule la partie del'image de destinationqui est en dehors del'image sourceest affichée, etl'image sourceest transparente | Joue-le " |
| lighter | Affiche l'image source + l'image de destination | Joue-le " |
| copy | Affiche l'image source. L'image de destination est ignorée | Joue-le " |
| xor | L'image source est combinée à l'aide d' un OU exclusif à l'image de destination , | Joue-le " |
Exemple
Toutes les valeurs de propriété de globalCompositeOperation: