前端基础_组合多个图形

组合多个图形

在前面的实例中，我们看到使用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
只有新图形会被保留，其他都被清除掉。
https://www.bilibili.com/video/BV1qL411u7eEhttps://www.bilibili.com/video/BV1qL411u7eE