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!