Detailed introduction to the globalCompositeOperation attribute in html5

The content of this article is about how to use background-orgin in css3 (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The default value attribute of globalCompositeOperation is source-over

1. Source-over and the source are above the target

context.fillStyle = 'aqua';
context.fillRect(50,50,100,100);//目标图形
context.globalCompositeOperation = 'source-over';
context.fillStyle = 'antiquewhite';
context.fillRect(100,100,100,100);//源图形

The upper graphic is the target and the lower graphic is the source

2. The destination-over target is on the source.

3. Source-atop will draw the source on top of the target, but in the overlapping area. Both of the above are opaque, the target drawn at other positions is opaque, and the source is transparent

context.fillStyle = 'aqua';
context.fillRect(50,50,100,100);
context.globalCompositeOperation = 'source-atop';
context.fillStyle = 'antiquewhite';
context.fillRect(100,100,100,100);

4. The effect of destination-atop and source-atop is opposite. , both are opaque in the overlapping part, but the source is opaque in other positions, and the target is transparent

5. In the overlapping part of source-in source and target, only the source is displayed, and other parts are Become transparent

6. Destination-in only displays the destination part where the source and destination overlap, and the rest becomes transparent

7. Source-out only displays the non-overlapping part of the source, and other parts are Do not display

8. destination-out only displays the non-overlapping part of the target, and the other parts are not displayed.

9. The value of lighter has nothing to do with the order. If the source and destination overlap, the two Add the color values, and the maximum color value is 255, and the value is white

10. Copy only copies the source

11. Copies only the non-overlapping parts of the source and target, and the overlapping parts are transparent

Related recommendations:

Detailed introduction to the attribute download in HTML5

Detailed introduction to the use of H5 flexible box layout (parent container Attributes)

The above is the detailed content of Detailed introduction to the globalCompositeOperation attribute in html5. For more information, please follow other related articles on the PHP Chinese website!