html5 canvas 渲染像素混合模式

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.