首页 > 代码库 > HTML5 canvas globalCompositeOperation绘图类型讲解
HTML5 canvas globalCompositeOperation绘图类型讲解
我们总是将一个图形画在另一个之上，大多数情况下，这样是不够的。比如说，它这样受制于图形的绘制顺序。不过，我们可以利用 globalCompositeOperation 属性来改变这些做法。globalCompositeOperation = type
我们不仅可以在已有图形后面再画新图形，还可以用来遮盖，清除（比 clearRect 方法强劲得多）某些区域。
type 是下面 12 种字符串值之一：
注意：下面所有例子中，蓝色方块是先绘制的，即“已有的 canvas 内容”，红色圆形是后面绘制，即“新图形”。
source-over (default) 这是默认设置，新图形会覆盖在原有内容之上。 |
| destination-over 会在原有内容之下绘制新图形。 |
|
source-in 新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的。 |
| destination-in 原有内容中与新图形重叠的部分会被保留，其它区域都变成透明的。 |
|
source-out 结果是只有新图形中与原有内容不重叠的部分会被绘制出来。 |
| destination-out 原有内容中与新图形不重叠的部分会被保留。 |
|
source-atop 新图形中与原有内容重叠的部分会被绘制，并覆盖于原有内容之上。 |
| destination-atop 原有内容中与新内容重叠的部分会被保留，并会在原有内容之下绘制新图形 |
|
lighter 两图形中重叠部分作加色处理。 |
| darker 两图形中重叠的部分作减色处理。 |
|
xor 重叠的部分会变成透明。 |
| copy 只有新图形会被保留，其它都被清除掉。 |
|
注意：copy 和 darker 属性值在 Gecko 1.8 型的浏览器（Firefox 1.5 betas，等等）上暂时还无效。
HTML5 canvas globalCompositeOperation绘图类型讲解