Canvas學習：globalCompositeOperation詳解

摘要： 在預設情況之下，如果在Canvas之中將某個物體（源）繪製在另一個物體（目標）之上，那麼瀏覽器就會簡單地把源特體的影象疊放在目標物體影象上面。 簡單點講，在Canvas中，把影象源和目標影象，通過Canvas中的 globalCompositeOperation 操作，可以得到...

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

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

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

影象合成 globalCompositeOperation 型別

在Canvas中 globalCompositeOperation 屬性的值總共有 26 種類型，每種型別都將前生不一樣的效果，當然你可能看到效果都將不樣，甚至有一些效果在瀏覽器中並不能正常的渲染。不過不要緊，我們簡單的瞭解這26種類型其代表的含意以及產生的效果。

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

上面的程式碼將在Canvas畫布上繪製一個半徑為 80px 的紅色圓形，在這裡把它稱為影象源。

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

這段程式碼將在Canvas畫布上繪製一個半徑為 80px 的橙色圓形，在這裡把它稱為影象目標。在影象源和目標影象之間設定 globalCompositeOperation 的值，就可以完成影象的合成操作：

 1 ctx.save(); 
 2 ctx.translate(w / 2, h / 2); 
 3 ctx.fillStyle = 'red'; 
 4 ctx.beginPath(); 
 5 ctx.arc(-40, 20, 80, 0, Math.PI * 2, true); 
 6 ctx.closePath(); 
 7 ctx.fill(); 
 8 ctx.globalCompositeOperation = 'source-in'; 
 9 ctx.fillStyle = 'orange'; 
10 ctx.beginPath(); 
11 ctx.arc(40, 20, 80, 0, Math.PI * 2, true); 
12 ctx.closePath(); 
13 ctx.fill(); 
14 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 ：目標圖形和源圖形重疊的部分會被保留（源圖形），其餘顯示為透明

其它的就不一一展示了。具體每個值對應的描述，可以 API/CanvasRenderingContext2D/globalCompositeOperation" target="_blank" rel="nofollow,noindex">點選這裡查閱 。

具體效果可以看下面的實現效果：

結合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 背景：

效果程式碼: