Les effets de synthèse du canevas incluent la source sur, la source-entrée, la source-sortie, la source-au-dessus, la destination-sur, la destination-entrée, la destination-sortie, la destination-au-dessus, le briquet, la copie, etc. Introduction détaillée : 1. Source-over, le mode de synthèse par défaut, l'image nouvellement dessinée sera superposée sur l'image existante 2. Source-in, etc.
L'environnement d'exploitation de ce tutoriel : système Windows, Ordinateur Dell G3.
Canvas est une API de dessin en HTML5. Elle fournit des fonctions de dessin riches, notamment des effets de dessin graphique, de traitement d'image et de synthèse. Dans Canvas, l'effet de composition fait référence à la superposition de plusieurs images via différents modes de composition lors du dessin d'images, produisant ainsi différents effets visuels. Ce qui suit présentera quelques effets de synthèse Canvas courants.
1. source-over : Il s'agit du mode de composition par défaut, l'image nouvellement dessinée sera superposée à l'image existante.
2. source-in : seules les parties superposées de l'image nouvellement dessinée et de l'image existante seront conservées, et les autres parties seront rendues transparentes.
3. source-out : seules les parties de l'image nouvellement dessinée qui ne chevauchent pas l'image existante seront conservées et les autres parties seront rendues transparentes.
4. source-atop : l'image nouvellement dessinée sera superposée à l'image existante, mais seule la partie qui chevauche l'image existante sera conservée et les autres parties seront rendues transparentes.
5. destination-over : l'image nouvellement dessinée sera située sous l'image existante.
6. destination-in : Seules les parties de l'image existante qui chevauchent l'image nouvellement dessinée seront conservées et les autres parties seront rendues transparentes.
7. destination-out : seules les parties de l'image existante qui ne chevauchent pas l'image nouvellement dessinée seront conservées et les autres parties seront rendues transparentes.
8. destination-au-dessus : l'image existante sera située sous l'image nouvellement dessinée, mais seule la partie qui chevauche l'image nouvellement dessinée sera conservée et les autres parties seront rendues transparentes.
9. Plus clair : les couleurs de l'image nouvellement dessinée et de l'image existante seront ajoutées pour produire une couleur plus claire.
10. copie : L'image nouvellement dessinée remplacera complètement l'image existante.
11. xor : La couleur de l'image nouvellement dessinée et de l'image existante sera XORée pour produire des effets spéciaux.
En plus des modes de composition ci-dessus, Canvas fournit également certaines opérations de composition globale, qui peuvent être définies via la propriété globalCompositeOperation. Les opérations de composition globale courantes incluent :
1. Multiplier : l'image nouvellement dessinée est multipliée par la couleur de l'image existante pour produire une couleur plus profonde.
2. écran : L'image nouvellement dessinée est fusionnée à l'écran avec la couleur de l'image existante pour produire une couleur plus lumineuse.
3. superposition : ajustez la couleur de l'image nouvellement dessinée en fonction de la luminosité et du contraste de l'image existante.
4. assombrir : comparez la couleur de l'image nouvellement dessinée avec la couleur de l'image existante, en conservant la couleur la plus foncée.
5. éclaircir : comparez la couleur de l'image nouvellement dessinée avec la couleur de l'image existante, en conservant la couleur plus claire.
En utilisant ces effets de composition, nous pouvons obtenir divers effets visuels intéressants dans Canvas, tels que le mélange d'images, les effets de transparence, les effets d'ombre, etc. Dans les applications pratiques, nous pouvons choisir le mode de synthèse approprié selon les besoins pour obtenir l'effet souhaité. Dans le même temps, nous pouvons également créer des effets graphiques plus complexes et uniques en combinant plusieurs images et effets composites.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
