HTML5 Canvas 学习日志（三）



HTML5 Canvas 学习日志（三）

Canvas的11种合成

蓝色为destination，粉色为source

1 source-over （默认）

<strong>context.globalCompositeOperation = "source-over";</strong>

source在上面，destination在下面

2 destination-over

<strong>context.globalCompositeOperation = "destination-over";</strong>

source在下面，destination在上面

3 source-atop

context.globalCompositeOperation = "source-atop";

显示destination和重叠部分

4 destination-atop

<strong>context.globalCompositeOperation = "destination-atop";</strong>

显示source和重叠部分

5 source-in

<strong>context.globalCompositeOperation = "source-in";</strong>

只显示source的重叠部分

6 destination-in

<strong>context.globalCompositeOperation = "destination-in";</strong>

只显示destination的重叠部分

7 source-out

<strong>context.globalCompositeOperation = "source-out";</strong>

只显示source未重叠部分

8 destination-out

<strong>context.globalCompositeOperation = "destination-out";</strong>

只显示destination未重叠部分

9 lighter

<strong>context.globalCompositeOperation = "lighter";</strong>

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

10 copy

<strong>context.globalCompositeOperation = "copy";</strong>

只显示source

11 xor

<strong>context.globalCompositeOperation = "xor";</strong>

重叠部分不显示