Propriété globalCompositeOperationdu canvas HTML
Manuel de référence HTML canvas
Exemples
Utilisez différentes valeurs de globalCompositeOperation pour dessiner des rectangles. Le rectangle rouge estl'image de destination, et le rectangle bleu estl'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);
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 »
Prise en charge des navigateurs
Internet Explorer 9, Firefox, Opera, Chrome et Safari prennent en charge la propriété globalCompositeOperation.
Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.
Définition et utilisation
La propriété globalCompositeOperation définit ou renvoie la façon dont une image source (nouvelle) est dessinée sur une image de destination (existante).
image source =Le dessin que vous avez l'intention de placer sur le canvas.
image de destination =Le dessin que vous avez déjà placé sur le canvas.
| Valeur par défaut : | source-over |
|---|---|
| Syntaxe JavaScript : | context.globalCompositeOperation="source-in"; |
Valeurs de propriété
| Valeur | Description |
|---|---|
| source-over | Par défaut. Surl'image de destinationafficherl'image source.。 |
| source-atop | DansAu-dessus de l'image de destinationafficherl'image source.。La partie de l'image sourcesituéeen dehors de l'image de destinationn'est pas visible. |
| source-in | DansDans l'image de destinationafficherl'image source.. Uniquementl'image de destinationà l'intérieur del'image sourcela partie sera affichée,l'image de destinationest transparente. |
| source-out | DansEn dehors de l'image de destinationafficherl'image source.. Uniquementl'image de destinationen dehors del'image sourcela partie sera affichée,l'image de destinationest transparente. |
| destination-over | DansSur l'image sourceafficherl'image de destination.。 |
| destination-atop | DansAu-dessus de l'image sourceafficherl'image de destination.。La partie de l'image de destinationsituéeen dehors de l'image sourcen'est pas visible. |
| destination-in | DansDans l'image sourceafficherl'image de destination.. Seulementl'image sourceà l'intérieur del'image de destinationla partie sera affichée,l'image sourceest transparente. |
| destination-out | DansEn dehors de l'image sourceafficherl'image de destination.. Seulementl'image sourceen dehorsde l'image de destinationla partie sera affichée,l'image sourceest transparente. |
| lighter | Afficherl'image source + et l'image de destination.。 |
| copy | Afficherl'image source.. Ignorerl'image de destination.。 |
| xor | En utilisant l'opération XOR,l'image sourceetet l'image de destinationsont combinées. |
Manuel de référence HTML canvas Autres extensions