HTML5 canvas globalCompositeOperation繪圖類(lèi)型講解

我們總是將一個(gè)圖形畫(huà)在另一個(gè)之上，大多數(shù)情況下，這樣是不夠的。比如說(shuō)，它這樣受制于圖形的繪制順序。不過(guò)，我們可以利用 globalCompositeOperation 屬性來(lái)改變這些做法。
globalCompositeOperation = type
我們不僅可以在已有圖形后面再畫(huà)新圖形，還可以用來(lái)遮蓋，清除（比 clearRect 方法強(qiáng)勁得多）某些區(qū)域。

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

注意：下面所有例子中，藍(lán)色方塊是先繪制的，即“已有的 canvas 內(nèi)容”，紅色圓形是后面繪制，即“新圖形”。

source-over (default) 這是默認(rèn)設(shè)置，新圖形會(huì)覆蓋在原有內(nèi)容之上。		destination-over 會(huì)在原有內(nèi)容之下繪制新圖形。
source-in 新圖形會(huì)僅僅出現(xiàn)與原有內(nèi)容重疊的部分。其它區(qū)域都變成透明的。		destination-in 原有內(nèi)容中與新圖形重疊的部分會(huì)被保留，其它區(qū)域都變成透明的。
source-out 結(jié)果是只有新圖形中與原有內(nèi)容不重疊的部分會(huì)被繪制出來(lái)。		destination-out 原有內(nèi)容中與新圖形不重疊的部分會(huì)被保留。
source-atop 新圖形中與原有內(nèi)容重疊的部分會(huì)被繪制，并覆蓋于原有內(nèi)容之上。		destination-atop 原有內(nèi)容中與新內(nèi)容重疊的部分會(huì)被保留，并會(huì)在原有內(nèi)容之下繪制新圖形
lighter 兩圖形中重疊部分作加色處理。		darker 兩圖形中重疊的部分作減色處理。
xor 重疊的部分會(huì)變成透明。		copy 只有新圖形會(huì)被保留，其它都被清除掉。