Canvas globalCompositeOperation

在默認狀況之下，若是在Canvas之中將某個物體（源）繪製在另外一個物體（目標）之上，那麼瀏覽器就會簡單地把源特體的圖像疊放在目標物體圖像上面。

簡單點講，在Canvas中，把圖像源和目標圖像，經過Canvas中的 globalCompositeOperation 操做，能夠獲得不一樣的效果，好比下圖：

正如上圖，紅蘋果和黑色的圓，經過 globalCompositeOperation 的 destination-out 就變成了被咬了一口的紅蘋果。也就是說，在Canvas中經過圖像的合成，咱們能夠實現一些不同凡響的效果，好比咱們要製做一個刮刮卡抽獎的效果。 今天咱們就來了解Canvas中的圖像合成怎麼使用。

圖像合成 globalCompositeOperation 類型

在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

source-over 是 globalCompositeOperation 屬性的默認值。源圖形覆蓋目標圖形，源圖形不透明的地方顯示源圖形，其他顯示目標圖形

source-in

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

source-out

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

source-atop

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

destination-over

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

destination-in

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

其它的就不一一展現了。具體每一個值對應的描述，能夠點擊這裏查閱 。

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

這篇文章咱們主要介紹了Canvas的圖像合成，在Canvas中能夠經過兩個屬性globalAlpha和globalCompositeOperation來控制圖像合成操做，實現圖像合成效果