Detailed description of the Globalcompositeoperation attribute in HTML5

This article brings you the content is about CSS3 in the use of Background-orgin (with code), there is a certain reference value, the need for a friend can refer to, I hope you have some help.

The default Value property of Globalcompositeoperation is Source-over

1, Source-over and source on the target

Context.fillstyle = ' Aqua '; Context.fillrect (50,50,100,100);//target Graph context.globalcompositeoperation = ' source-over '; Context.fillstyle = ' Antiquewhite '; Context.fillrect (100,100,100,100);//source graphics

The graphic above is the target, and the graphic below is the source

2, Destination-over target on the source

3. Source-atop will draw the source above the target, but both are opaque on the coincident area, and the target drawn in the other position 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, Destination-atop and source-atop effect, in the overlap between the two are not transparent, but in other locations source opaque, transparent target

5, source-in source and target overlap Part only show the source, the other parts have become transparent

6, destination-in source and target overlap part, only show the target, others become transparent

7, source-out only show the source is not overlapping parts, the other parts are not displayed

8, destination-out only show the target not overlapping parts, other parts are not displayed

9, lighter This value is independent of the order, if the source and target overlap, the two color values are added to get the maximum color value of 255, the value is white

10. Copy copies only the source

11. Copy only the source and target non-overlapping parts, overlapping parts transparent