推荐订阅源

globalCompositeOperation的作用

在默认情况之下，如果在Canvas之中将某个物体（源）绘制在另一个物体（目标）之上，那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面。

简单点讲，在Canvas中，把图像源和目标图像，通过Canvas中的globalCompositeOperation操作，可以得到不同的效果，比如下图：

 正如上图，红苹果和黑色的圆，通过globalCompositeOperation的destination-out就变成了被咬了一口的红苹果。也就是说，在Canvas中通过图像的合成，我们可以实现一些与众不同的效果，比如我们要制作一个刮刮卡抽奖的效果。 今天我们就来了解Canvas中的图像合成怎么使用。

属性值介绍

图像合成globalCompositeOperation类型

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

 ctx.save(); 
 ctx.translate(w / 2, h / 2);
 ctx.fillStyle = 'red'; 
 ctx.beginPath(); 
 ctx.arc(-40, 20, 80, 0, Math.PI * 2, true); 
 ctx.closePath(); 
 ctx.fill();

上面的代码将在Canvas画布上绘制一个半径为80px的红色圆形，在这里把它称为图像源。

 ctx.fillStyle = 'orange'; 
 ctx.beginPath();
 ctx.arc(40, 20, 80, 0, Math.PI * 2, true); 
 ctx.closePath(); 
 ctx.fill();
 ctx.restore();

这段代码将在Canvas画布上绘制一个半径为80px的橙色圆形，在这里把它称为图像目标。在图像源和目标图像之间设置globalCompositeOperation的值，就可以完成图像的合成操作：

 ctx.save(); 
 ctx.translate(w / 2, h / 2); 
 ctx.fillStyle = 'red'; 
 ctx.beginPath(); 
 ctx.arc(-40, 20, 80, 0, Math.PI * 2, true); 
 ctx.closePath(); 
 ctx.fill(); 
 ctx.globalCompositeOperation = 'source-in'; 
 ctx.fillStyle = 'orange'; 
 ctx.beginPath(); 
 ctx.arc(40, 20, 80, 0, Math.PI * 2, true); 
 ctx.closePath(); 
 ctx.fill(); 
 ctx.restore();

此时得到的效果如下：

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：目标图形和源图形重叠的部分会被保留（源图形），其余显示为透明

source-over	默认。在目标图像上显示源图像。
source-atop	在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in	在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out	在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
destination-over	在源图像上方显示目标图像。
destination-atop	在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
destination-in	在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
destination-out	在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
lighter	显示源图像 + 目标图像。
copy	显示源图像。忽略目标图像。
xor	使用异或操作对源图像与目标图像进行组合。

其它的就不一一展示了。