HTML5 canvas globalCompositeOperation繪圖類型講解

標籤：des   http   io   ar   os   sp   strong   on   bs   

我們總是將一個圖形畫在另一個之上，大多數情況下，這樣是不夠的。比如說，它這樣受制於圖形的繪製順序。不過，我們可以利用 globalCompositeOperation 屬性來改變這些做法。
globalCompositeOperation = type
我們不僅可以在已有圖形後面再畫新圖形，還可以用來遮蓋，清除（比 clearRect 方法強勁得多）某些地區。

type 是下面 12 種字串值之一：

注意：下面所有例子中，藍色方塊是先繪製的，即“已有的 canvas 內容”，紅色圓形是後面繪製，即“新圖形”。

source-over (default) 這是預設設定，新圖形會覆蓋在原有內容之上。		destination-over 會在原有內容之下繪製新圖形。
source-in 新圖形會僅僅出現與原有內容重疊的部分。其它地區都變成透明的。		destination-in 原有內容中與新圖形重疊的部分會被保留，其它地區都變成透明的。
source-out 結果是只有新圖形中與原有內容不重疊的部分會被繪製出來。		destination-out 原有內容中與新圖形不重疊的部分會被保留。
source-atop 新圖形中與原有內容重疊的部分會被繪製，並覆蓋於原有內容之上。		destination-atop 原有內容中與新內容重疊的部分會被保留，並會在原有內容之下繪製新圖形
lighter 兩圖形中重疊部分作加色處理。		darker 兩圖形中重疊的部分作減色處理。
xor 重疊的部分會變成透明。		copy 只有新圖形會被保留，其它都被清除掉。

注意：copy 和 darker 屬性值在 Gecko 1.8 型的瀏覽器（Firefox 1.5 betas，等等）上暫時還無效。

HTML5 canvas globalCompositeOperation繪圖類型講解