Canvas 全域複合操作

在預設情況之下，如果在Canvas之中將某個物體（來源）繪製在另一個物體（目標）之上，那麼瀏覽器就會簡單地把源特體的圖像疊放在目標物體圖像上面。

簡單點講，在Canvas中，把影像來源和目標影像，透過Canvas中的globalCompositeOperation操作，可以得到不同的效果，例如下圖：

如上圖，紅蘋果和黑色的圓，透過globalCompositeOperation的destination-out就變成了被咬了一口的紅蘋果。也就是說，在Canvas中透過影像的合成，我們可以實現一些與眾不同的效果，例如我們要製作一個刮刮卡抽獎的效果。 今天我們就來了解Canvas中的影像合成怎麼使用。

在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是globalCompositeOperation屬性的預設值。來源圖形覆蓋目標圖形，來源圖形不透明的地方顯示來源圖形，其餘顯示目標圖形

source-in ：目標圖形和來源圖形重疊且都不透明的部分才被繪製

source-out ：目標圖形和來源圖形不重疊的部分會被繪製

source-atop ：目標圖形和來源圖形內容重疊的部分的目標圖形會被繪製

destination-over ：目標圖形和來源圖形內容後面的目標圖形會被繪製

destination-in ：目標圖形和來源圖形重疊的部分會保留（來源圖形），其餘顯示為透明

其它的就不一一展示了。具體每個數值對應的描述，可以點擊這裡查閱。

在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來控制影像合成操作，實現影像合成效果。希望對大家的學習有幫助，也希望大家多多支持VeVb武林網。