Maison > Article > interface Web > Introduction détaillée à l'attribut globalCompositeOperation en html5
Le contenu de cet article explique comment utiliser background-orgin en CSS3 (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
L'attribut de valeur par défaut de globalCompositeOperation est source-over
1. Source-over et la source est au-dessus de la cible
context.fillStyle = 'aqua'; context.fillRect(50,50,100,100);//目标图形 context.globalCompositeOperation = 'source-over'; context.fillStyle = 'antiquewhite'; context.fillRect(100,100,100,100);//源图形
Le graphique ci-dessus est la cible, et le graphique inférieur est la source
2. La cible de destination est sur la source
3. de la cible, mais sur Les deux sont opaques dans la zone de chevauchement, la cible dessinée à d'autres positions est opaque et la source est transparente
context.fillStyle = 'aqua'; context.fillRect(50,50,100,100); context.globalCompositeOperation = 'source-atop'; context.fillStyle = 'antiquewhite'; context.fillRect(100,100,100,100);
4. destination- atop et source -atop ont l'effet inverse, les deux sont opaques dans la partie superposée, mais la source est opaque dans d'autres positions, et la cible est transparente
5. -in affiche uniquement la source dans la partie qui se chevauche de la source et de la cible, les autres parties deviennent transparentes
6. >
7. source-out affiche uniquement la partie qui ne se chevauche pas de la source, les autres parties ne sont pas affichées 8. destination-out affiche uniquement la partie qui ne se chevauche pas de la cible et les autres parties. ne sont pas affichés 9. La valeur du plus clair n'a rien à voir avec la commande. Si la source et la destination se chevauchent, ajoutez simplement les deux valeurs de couleur, et la valeur de couleur maximale est de 255, et la valeur est blanche. 10. Copier uniquement la source 11. Copier uniquement les parties qui ne se chevauchent pas de la source et de la cible. Les parties qui se chevauchent sont transparentes Recommandations associées :.
Introduction détaillée à l'attribut download en HTML5
Introduction détaillée à la disposition de la boîte flexible H5 Utilisation (propriété du conteneur parent)
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!