在默認(rèn)情況之下，如果在Canvas之中將某個(gè)物體（源）繪制在另一個(gè)物體（目標(biāo)）之上，那么瀏覽器就會(huì)簡(jiǎn)單地把源特體的圖像疊放在目標(biāo)物體圖像上面。

簡(jiǎn)單點(diǎn)講，在Canvas中，把圖像源和目標(biāo)圖像，通過(guò)Canvas中的 globalCompositeOperation 操作，可以得到不同的效果，比如下圖：

正如上圖，紅蘋(píng)果和黑色的圓，通過(guò) globalCompositeOperation 的 destination-out 就變成了被咬了一口的紅蘋(píng)果。也就是說(shuō)，在Canvas中通過(guò)圖像的合成，我們可以實(shí)現(xiàn)一些與眾不同的效果，比如我們要制作一個(gè)刮刮卡抽獎(jiǎng)的效果。 今天我們就來(lái)了解Canvas中的圖像合成怎么使用。

圖像合成 globalCompositeOperation 類(lèi)型

在Canvas中 globalCompositeOperation 屬性的值總共有 26 種類(lèi)型，每種類(lèi)型都將前生不一樣的效果，當(dāng)然你可能看到效果都將不樣，甚至有一些效果在瀏覽器中并不能正常的渲染。不過(guò)不要緊，我們簡(jiǎn)單的了解這26種類(lèi)型其代表的含意以及產(chǎn)生的效果。

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畫(huà)布上繪制一個(gè)半徑為 80px 的紅色圓形，在這里把它稱為圖像源。

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

這段代碼將在Canvas畫(huà)布上繪制一個(gè)半徑為 80px 的橙色圓形，在這里把它稱為圖像目標(biāo)。在圖像源和目標(biāo)圖像之間設(shè)置 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();

此時(shí)得到的效果如下：

source-over

source-over 是 globalCompositeOperation 屬性的默認(rèn)值。源圖形覆蓋目標(biāo)圖形，源圖形不透明的地方顯示源圖形，其余顯示目標(biāo)圖形

source-in

source-in ：目標(biāo)圖形和源圖形重疊且都不透明的部分才被繪制

source-out

source-out ：目標(biāo)圖形和源圖形不重疊的部分會(huì)被繪制

source-atop

source-atop ：目標(biāo)圖形和源圖形內(nèi)容重疊的部分的目標(biāo)圖形會(huì)被繪制

destination-over

destination-over ：目標(biāo)圖形和源圖形內(nèi)容后面的目標(biāo)圖形會(huì)被繪制

destination-in

destination-in ：目標(biāo)圖形和源圖形重疊的部分會(huì)被保留（源圖形），其余顯示為透明

其它的就不一一展示了。具體每個(gè)值對(duì)應(yīng)的描述，可以點(diǎn)擊這里查閱 。

結(jié)合globalAlpha控制圖像合成操作

在Canvas中有兩個(gè)屬性 globalAlpha 和 globalCompositeOperation 來(lái)控制圖像合成操作：

• globalAlpha ：設(shè)置圖像的透明度。 globalAlpha 屬性默認(rèn)值為 1 ，表示完全不透明，并且可以設(shè)置從 0 （完全透明）到 1 （完全不透明）。這個(gè)值必須設(shè)置在圖形繪制之前
• globalCompositeOperation ：該屬性的值在 globalAlpha 以及所有變換都生效后控制在當(dāng)前Canvas位圖中繪制圖形

合成圖像的應(yīng)用示例

在平時(shí)的業(yè)務(wù)中，我們常常能看到刮刮卡這樣的抽獎(jiǎng)效果。如果我們使用Canvas來(lái)做，就會(huì)用到Canvas圖像的合成。

<div id="card"> <canvas id="canvasOne" width="500" height="300"></canvas> </div>

我們把獎(jiǎng)品（如果是一個(gè)圖像）當(dāng)作 div#card 的背景展示。然后在Canvas中先繪制一個(gè)灰色的矩形（源圖像），再通過(guò)鼠標(biāo)事件（或觸摸事件）來(lái)動(dòng)態(tài)繪制新圖像（這個(gè)就類(lèi)似筆刷），把 globalCompositeOperation 屬性的值設(shè)置為 destination-out （新繪制的圖形和目標(biāo)canvas中已經(jīng)存在的圖形內(nèi)容不重疊的部分的會(huì)被保留）。當(dāng)筆刷擦除大于一定的比例的時(shí)候，就刪除 <canvas> 元素或者使用 clearRect() 清除Canvas畫(huà)布。從而展示出 div 背景

這篇文章我們主要介紹了Canvas的圖像合成，在Canvas中可以通過(guò)兩個(gè)屬性globalAlpha和globalCompositeOperation來(lái)控制圖像合成操作，實(shí)現(xiàn)圖像合成效果。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。