Exemple
Dessiner des rectangles à l'aide de deux valeurs différentes globalCompositeOperation. Rectangles rouges sont des destination images . Rectangles bleus sont des source images :
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);
Essayez vous - même » Support du navigateur
Les chiffres du tableau indiquent la première version du navigateur qui prend en charge entièrement la propriété.
| Propriété | |||||
|---|---|---|---|---|---|
| globalCompositeOperation | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Définition et utilisation
Les ensembles de propriétés de globalCompositeOperation ou comment une source des rendements (new) image sont étirées sur une destination (existing) image.
image source = dessins vous êtes sur le point de mettre sur la toile.
image de destination = dessins qui sont déjà placés sur la toile.
| Valeur par défaut: | source sur |
|---|---|
| syntaxe JavaScript: | context .globalCompositeOperation="source-in"; |
Valeurs de propriété
| 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 de l' source image qui est en dehors de l' destination image ne soit pas représenté | Joue-le " |
| source-in | Affiche l'image source pour l'image de destination. Seule la partie de l' source image qui est à l' intérieur de la destination image est affichée, et l' destination image est transparent | Joue-le " |
| source-out | Affiche l'image source de l'image de destination. Seule la partie de l' source image qui est en dehors de l' destination image est affichée, et l' destination image est transparent | Joue-le " |
| destination-over | Affiche l'image de destination sur l'image source | Joue-le " |
| destination-atop | Affiche l'image de destination au - dessus de l'image source. La partie de l' destination image qui est en dehors de l' source image ne soit pas représenté | Joue-le " |
| destination-in | Affiche l'image de destination pour l'image source. Seule la partie de l' destination image qui se trouve dans l' source image est affichée, et l' source image est transparent | Joue-le " |
| destination-out | Affiche l'image de destination de l'image source. Seule la partie de l' destination image qui est en dehors de l' source image est affichée, et l' source image est transparent | 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é à l'aide d' un OU exclusif avec l'image de destination | Joue-le " |
<Canvas objet