
4.5 图形合成
本节将介绍图形合成的一般方法,以及路径裁切的实现。
4.5.1 合成

视频讲解
当两个或两个以上的图形存在重叠区域时,默认情况下一个图形画在前一个图形之上。通过指定图形globalCompositeOperation属性的值可以改变图形的绘制顺序或绘制方式,从而实现更多种可能。
【示例】下面示例设置所有图形的透明度为1,即不透明。设置globalCompositeOperation属性值为source-over,即默认设置,新的图形会覆盖在原有图形之上,也可以指定其他值,详见表4.1。

在浏览器中的预览效果如图4.39所示。如果将globalAlpha的值更改为0.5(ctx.globalAlpha=0.5;),则两个图形都会呈半透明效果,如图4.40所示。

图4.39 图形的组合

图4.40 半透明效果
表4.1给出了globalCompositeOperation属性所有可用的值。表中的图例矩形表示为B,为先绘制的图形(原有内容为destination),圆形表示为A,为后绘制的图形(新图形为source)。在应用时注意globalCompositeOperation语句的位置,应处在原有内容与新图形之间。Chrome浏览器支持大多数属性值,无效的在表中已经标出。Opera浏览器对这些属性值的支持相对来说更好一些。
表4.1 globalCompositeOperation属性所有可用的值

4.5.2 裁切

视频讲解
使用clip()方法能够从原始画布中剪切任意形状和尺寸。其原理与绘制普通canvas图形类似,只不过clip()的作用是形成一个蒙版,没有被蒙版的区域会被隐藏。
提示:一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内,不能访问画布上的其他区域。用户也可以在使用clip()方法前,通过使用save()方法对当前画布区域进行保存,并在以后的任意时间通过restore()方法对其进行恢复。
【示例】如果绘制一个圆形,并进行裁切,则圆形之外的区域将不会绘制在canvas上。

可以看到只有圆形区域内螺旋图形被显示了出来,其余部分被裁切掉了,效果如图4.41所示。

图4.41 裁切图形