动画效果之 Canvas学习-globalCompositeOperation详解

本节介绍一下globalCompositeOperation，以的形式说明每个属性。
globalCompositeOperation与cilp（）的区别：
globalCompositeOperation用于控制源图像在目标图像上的显示方式。

• 源图像: 指你准备绘制到画布上的图像
• 目标图像：在画布上已经绘制的图像

clip() 方法从原始画布中剪切任意形状和尺寸。

• 提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。

图像合成globalCompositeOperation类型

在Canvas中globalCompositeOperation属性的值总共有26种类型，每种类型都将前生不一样的效果，当然你可能看到效果都将不样，甚至有一些效果在浏览器中并不能正常的渲染。不过不要紧，我们简单的了解这26种类型其代表的含意以及产生的效果。
今天我们就来了解Canvas中的图像合成怎么使用。

蓝色区域为旧图形（目标图像），红色为新图形（源图像）

值	描述	值	描述
source-over 预设值。将新图形放在旧图形之上。		destination-over 将新图形放在旧图形之下。
source-in 只保留新、旧图片重叠的新圆形区域，其余透明。		destination-in 只保留新、旧图片重叠的新圆形区域，其余透明。
source-out 只保留新、旧图像的非重叠的新圆形区域，其余为透明。		destination-out 只保留新、旧图像的非重叠的旧圆形区域，其余为透明。
source-atop 新圆形只在绘制新、旧图像重叠的新圆形区域，然后盖在旧图形之上		destination-atop 旧图形只保留在新、旧图形重叠的旧圆形区域，然后盖在新圆形之上。
lighter 新旧图像重叠区域的颜色，有新、旧图像的颜色吗相加而得		xor 新旧图像重叠区域设为透明
copy 移除其他图像，只保留新图形