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. >

.

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!