组合多个图形
在前面的实例中，我们看到使用Canvas API可以将一个图形重叠绘制在另一个图形上面，但图形中能够被看到的部分完全取决于以哪种方式进行组合，这时需要使用到Canvas API的图形组合技术。在HTML5中，只要用图形上下文对象的globalCompositeOperation属性就能自己决定图形的组合方式，使用方法如下。
context.globalCompositeOperation = type
type的值必须是下面几种字符串之一。
下面将以图形组合的方式，来说明type值的字符串表现形式。
在下面的图形中，黑色方块是先绘制的，即“已有的canvas内容”，灰色圆形是后面绘制的，即“新图形”。
source-over
这是默认设置，表示新图形会覆盖在原有图形之上。效果如图17.23所示。
destination-over
表示会在原有图形之下绘制新图形。效果如图17.24所示。
source-in
新图形会仅仅出现与原有图形重叠的部分，其他区域都变成透明的。
destination-in
原有图形中与新图形重叠的部分会被保留，其他区域都变成透明的。效果如图17.26所示。
source-out
只有新图形中与原有内容不重叠的部分会被绘制出来。效果如图17.27所示。
destination-out
原有图形中与新图形不重叠的部分会被保留。效果如图17.28所示。
source-atop
只绘制新图形中与原有图形重叠的部分和未被重叠覆盖的原有图形，新图形的其他部分变成透明。
destination-atop
只绘制原有图形中被新图形重叠覆盖的部分与新图形的其他部分，原有图形中的其他部分变成透明，不绘制新图形中与原有图形相重叠的部分。效果如图17.30所示。
lighter
两图形中重叠部分作加色处理。
darker
两图形中重叠的部分作减色处理。效果如图17.32所示。
xor
重叠的部分会变成透明。效果如图17.33所示。
copy
只有新图形会被保留，其他都被清除掉 []www.bilibili.com/video/BV1kR…
