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 裁切图形