English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Dans HTML5Lorsque vous dessinez des formes sur le canevas, vous pouvez configurer comment le contenu que vous dessinez est composé avec le contenu déjà dessiné sur le canevas. Cet article explique comment mélanger le contenu de dessin avec le contenu existant sur le canevas.
2Le contexte D a deux attributs qui contrôlent le mode de composition du canevas. Ce sont :
globalAlpha
globalCompositeOperation
L'attribut globalAlpha détermine l'opacité du contenu dessiné/Opacité. Elle peut prendre une valeur entre 0 et1entre ces valeurs. 0 représente que le contenu que vous dessinez est complètement transparent. La valeur est 0.5représente que le contenu que vous dessinez est semi-transparent. La valeur est1représente que le contenu que vous dessinez est complètement opaque. La valeur par défaut est1.
L'attribut globalAlpha est configuré comme suit :
context.globalAlpha = 0.5;
L'attribut globalCompositeOperation détermine comment le contenu que vous dessinez est mélangé avec la graphique existante sur le canevas.
L'attribut globalCompositeOperation est configuré comme suit :
context.globalCompositeOperation = "copy";
globalCompositeOperation fait référence à "source" et "destination", et spécifie comment mélanger la source et la destination. La source est ce que vous dessinez, et la destination est ce qui a déjà été dessiné. Voici une liste des valeurs possibles et de leur signification :
| Valeur | Description |
copy | Où la source et la destination se chevauchent, la source sera affichée. |
destination-atop | Où la source et la destination se chevauchent et que les deux ne sont pas opaques, la destination sera affichée.Si la destination est transparente, la source sera affichée. |
destination-in | Où la source et la destination se chevauchent et que les deux ne sont pas opaques, la destination sera affichée.Où il n'y a pas de chevauchement, la source ne sera pas affichée. |
destination-out | La destination sera affichée partout où la source et la destination ne se chevauchent pas.La transparence sera affichée partout ailleurs. |
destination-over | Où la source et la destination se chevauchent, la destination sera affichée.Si il n'y a pas de chevauchement, la source sera affichée. |
source-atop | Où la source et la destination se chevauchent, la source sera affichée.Où il n'y a pas de chevauchement, ou où la source est transparente, la destination sera affichée. |
source-in | Lorsque la source et la destination se chevauchent et que les deux ne sont pas opaques, la source sera affichée.La transparence sera affichée partout ailleurs. |
source-out | Où la source et la destination ne se chevauchent pas, la source sera affichée.La transparence sera affichée partout ailleurs. |
source-over | Lorsque la source est opaque, la source sera affichée.destination s'affiche ailleurs. |
lighter | Les couleurs source et cible se superposent, rendant les couleurs plus claires, en direction de1valeurs de couleur (la luminosité maximale de cette couleur) se déplace. |
xor |
Ceci est un exemple de canevas où vous pouvez utiliser les modes de composition et les valeurs alpha. Vous pouvez changer les modes de composition en cliquant sur le bouton. Vous pouvez changer le mode Alpha en utilisant les contrôles sous le canevas.
globalAlpha
Si vous voyez le champ de texte globalAlpha, entrez une valeur entre 0 et10Entre les valeurs de 0. Le code convertira les valeurs entre 0 et1Entre les valeurs de .0. Sinon, utilisez le curseur.
Attention : Lors de la rédaction de cet article, Firefox et Chrome traitent ces modes de composition de manière différente. Ils semblent également différer des modes rects et text, voici comment ces modes fonctionnent. Testez différentes modes dans divers navigateurs que vous prévoyez de prendre en charge pour comprendre leur fonctionnement.