Canvas学习：globalCompositeOperation详解

　　在默认状况之下，若是在Canvas之中将某个物体（源）绘制在另外一个物体（目标）之上，那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面。
　　
　　简单点讲，在Canvas中，把图像源和目标图像，经过Canvas中的globalCompositeOperation操做，能够获得不一样的效果，好比下图：
　　
　　正如上图，红苹果和黑色的圆，经过globalCompositeOperation的destination-out就变成了被咬了一口的红苹果。也就是说，在Canvas中经过图像的合成，咱们能够实现一些不同凡响的效果，好比咱们要制做一个刮刮卡抽奖的效果。 今天咱们就来了解Canvas中的图像合成怎么使用。
　　
　　图像合成globalCompositeOperation类型
　　
　　在Canvas中globalCompositeOperation属性的值总共有26种类型，每种类型都将前生不同的效果，固然你可能看到效果都将不样，甚至有一些效果在浏览器中并不能正常的渲染。不过没关系，咱们简单的了解这26种类型其表明的含意以及产生的效果。
　　
　　复制代码
　　
　　1 ctx.save();
　　
　　2 ctx.translate(w / 2, h / 2);
　　
　　3 ctx.fillStyle = 'red';
　　
　　4 ctx.beginPath();
　　
　　5 ctx.arc(-40, 20, 80, 0, Math.PI * 2, true);
　　
　　6 ctx.closePath();
　　
　　7 ctx.fill();
　　
　　复制代码
　　
　　上面的代码将在Canvas画布上绘制一个半径为80px的红色圆形，在这里把它称为图像源。
　　
　　复制代码
　　
　　1 ctx.fillStyle = 'orange';
　　
　　2 ctx.beginPath();
　　
　　3 ctx.arc(40, 20, 80, 0, Math.PI * 2, true);
　　
　　4 ctx.closePath();
　　
　　5 ctx.fill();
　　
　　6 ctx.restore();
　　
　　复制代码
　　
　　这段代码将在Canvas画布上绘制一个半径为80px的橙色圆形，在这里把它称为图像目标。在图像源和目标图像之间设置globalCompositeOperation的值，就能够完成图像的合成操做：
　　
　　复制代码
　　
　　1 ctx.save();
　　
　　2 ctx.translate(w / 2, h / 2);
　　
　　3 ctx.fillStyle = 'red';
　　
　　4 ctx.beginPath();
　　
　　5 ctx.arc(-40, 20, 80, 0, Math.PI * 2, true);
　　
　　6 ctx.closePath();
　　
　　7 ctx.fill();
　　
　　8 ctx.globalCompositeOperation = 'source-in';
　　
　　9 ctx.fillStyle = 'orange';
　　
　　10 ctx.beginPath(www.michenggw.com);
　　
　　11 ctx.arc(40, 20, 80, 0, Math.PI * 2, true);
　　
　　12 ctx.closePath(www.mcyllpt.com);
　　
　　13 ctx.fill();
　　
　　14 ctx.restore(yongshiyule178.com);
　　
　　复制代码
　　
　　此时获得的效果以下：
　　
　　source-over
　　
　　source-over是globalCompositeOperation属性的默认值。源图形覆盖目标图形，源图形不透明的地方显示源图形，其他显示目标图形
　　
　　source-in
　　
　　source-in：目标图形和源图形重叠且都不透明的部分才被绘制
　　
　　source-out
　　
　　source-out：目标图形和源图形不重叠的部分会被绘制
　　
　　source-atop
　　
　　source-atop：目标图形和源图形内容重叠的部分的目标图形会被绘制
　　
　　destination-over
　　
　　destination-over：目标图形和源图形内容后面的目标图形会被绘制
　　
　　destination-in
　　
　　destination-in：目标图形和源图形重叠的部分会被保留（源图形），其他显示为透明
　　
　　其它的就不一一展现了。具体每一个值对应的描述，能够点击这里查阅。