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(www.michenggw.com);
　　
　　11 ctx.arc(40, 20, 80, 0, Math.PI * 2, true);
　　
　　12 ctx.closePath(www.mcyllpt.com);
　　
　　13 ctx.fill();
　　
　　14 ctx.restore(yongshiyule178.com);
　　
　　複製代碼
　　
　　此時獲得的效果以下：
　　
　　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：目標圖形和源圖形重疊的部分會被保留（源圖形），其他顯示爲透明
　　
　　其它的就不一一展現了。具體每一個值對應的描述，能夠點擊這裏查閱。