Canvas API 的 globalCompositeOperation 属性的取值:
source-over:
This is the default setting and draws new shapes on top of the existing canvas content.
source-in:
The new shape is drawn only where both the new shape and the destination canvas overlap. Everything else is made transparent.
source-out:
The new shape is drawn where it doesn't overlap the existing canvas content.
source-atop:
The new shape is only drawn where it overlaps the existing canvas content.
lighter:
Where both shapes overlap the color is determined by adding color values.
xor:
Shapes are made transparent where both overlap and drawn normal everywhere else.
destination-over:
New shapes are drawn behind the existing canvas content.
destination-in:
The existing canvas content is kept where both the new shape and existing canvas content overlap. Everything else is made transparent.
destination-out:
The existing content is kept where it doesn't overlap the new shape.
destination-atop:
The existing canvas is only kept where it overlaps the new shape. The new shape is drawn behind the canvas content.
darker:
Where both shapes overlap the color is determined by subtracting color values.