组合多个图形
在前面的实例中,我们看到使用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/BV1kR4y167Cp/?spm_id_from=333.999.0.0&vd_source=a7816e3b2a3a67ac39dc87f6bf92421chttps://www.bilibili.com/video/BV1kR4y167Cp/?spm_id_from=333.999.0.0&vd_source=a7816e3b2a3a67ac39dc87f6bf92421c