Canvas globalCompositeOperation

在默认设置状况之下，假如在Canvas当中将某个物件（源）绘图在另外一个物件（总体目标）之上，那末访问器就会简易地把源特体的图象叠放在总体目标物件图象上面。

简易点讲，在Canvas中，把图象源和总体目标图象，根据Canvas中的 globalCompositeOperation 实际操作，能够获得不一样的实际效果，例如下图：

正如上图，红iPhone和黑色的圆，根据 globalCompositeOperation 的 destination-out 就变为了被咬了1口的红iPhone。也便是说，在Canvas中根据图象的生成，大家能够完成1些不同寻常的实际效果，例如大家要制做1个刮刮卡抽奖的实际效果。 今日大家就来掌握Canvas中的图象生成如何应用。

图象生成 globalCompositeOperation 种类

在Canvas中 globalCompositeOperation 特性的值一共有 26 类型型，每类型型都将前生不1样的实际效果，自然你将会看到实际效果都将不样，乃至有1些实际效果在访问器中其实不能一切正常的3D渲染。但是没事儿，大家简易的掌握这26类型型其意味着的含义和造成的实际效果。

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

上面的编码将在Canvas画布上绘图1个半径为 80px 的鲜红色圆形，在这里把它称为图象源。

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

这段编码将在Canvas画布上绘图1个半径为 80px 的橙色圆形，在这里把它称为图象总体目标。在图象源和总体目标图象之间设定 globalCompositeOperation 的值，便可以进行图象的生成实际操作：

ctx.save(); 
ctx.translate(w / 2, h / 2); 
ctx.fillStyle = 'red'; 
ctx.beginPath(); 
ctx.arc(⑷0, 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 ：总体目标图型和源图型重合的一部分会被保存（源图型），其余显示信息为全透明

其它的就不11展现了。实际每一个值对应的叙述，能够点一下这里查阅 。

融合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>

大家把奖品（假如是1个图象）作为 div#card 的情况展现。随后在Canvas中先绘图1个灰色的矩形框（源图象），再根据电脑鼠标恶性事件（或触碰恶性事件）来动态性绘图新图象（这个就相近笔刷），把 globalCompositeOperation 特性的值设定为 destination-out （新绘图的图型和总体目标canvas中早已存在的图型內容不重合的一部分的会被保存）。当笔刷擦除超过1定的占比的情况下，就删掉 <canvas> 元素或应用 clearRect() 消除Canvas画布。从而展现出 div 情况

这篇文章内容大家关键详细介绍了Canvas的图象生成，在Canvas中能够根据两个特性globalAlpha和globalCompositeOperation来操纵图象生成实际操作，完成图象生成实际效果。期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。