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

其它的就不一一展现了。具体每一个值对应的描述，能够点击这里查阅 。

结合globalAlpha控制图像合成操做

在Canvas中有两个属性 globalAlpha 和 globalCompositeOperation 来控制图像合成操做：

• globalAlpha ：设置图像的透明度。 globalAlpha 属性默认值为 1 ，表示彻底不透明，而且能够设置从 0（彻底透明）到 1 （彻底不透明）。这个值必须设置在图形绘制以前
• globalCompositeOperation ：该属性的值在 globalAlpha 以及全部变换都生效后控制在当前Canvas位图中绘制图形

合成图像的应用示例

在平时的业务中，咱们经常能看到刮刮卡这样的抽奖效果。若是咱们使用Canvas来作，就会用到Canvas图像的合成。

`<``div` `id``=``"card"``>`
`<``canvas` `id``=``"canvasOne"` `width``=``"500"` `height``=``"300"``></``canvas``> </``div``>`
复制代码

咱们把奖品（若是是一个图像）看成 div#card 的背景展现。而后在Canvas中先绘制一个灰色的矩形（源图像），再经过鼠标事件（或触摸事件）来动态绘制新图像（这个就相似笔刷），把 globalCompositeOperation 属性的值设置为 destination-out （新绘制的图形和目标canvas中已经存在的图形内容不重叠的部分的会被保留）。当笔刷擦除大于必定的比例的时候，就删除 <canvas> 元素或者使用 clearRect() 清除Canvas画布。从而展现出 div 背景

这篇文章咱们主要介绍了Canvas的图像合成，在Canvas中能够经过两个属性globalAlpha和globalCompositeOperation来控制图像合成操做，实现图像合成效果