HTML5 Canvas 学习日志（三）

Canvas的11种合成

蓝色为destination，粉色为source

1 source-over （默认）

context.globalCompositeOperation = "source-over";

source在上面，destination在下面

2 destination-over

context.globalCompositeOperation = "destination-over";

source在下面，destination在上面

3 source-atop

context.globalCompositeOperation = "source-atop";

显示destination和重叠部分

4 destination-atop

context.globalCompositeOperation = "destination-atop";

显示source和重叠部分

5 source-in

context.globalCompositeOperation = "source-in";

只显示source的重叠部分

6 destination-in

context.globalCompositeOperation = "destination-in";

只显示destination的重叠部分

7 source-out

context.globalCompositeOperation = "source-out";

只显示source未重叠部分

8 destination-out

context.globalCompositeOperation = "destination-out";

只显示destination未重叠部分

9 lighter

context.globalCompositeOperation = "lighter";

重叠部分颜色为source和destination颜色值相加，蓝色方块颜色值为rgb(0, 102, 153)，粉色方块颜色值为rgb(255, 123, 172)

10 copy

context.globalCompositeOperation = "copy";

只显示source

11 xor

context.globalCompositeOperation = "xor";

重叠部分不显示