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ì)被保留,其它都被清除掉。 |
|
注意:copy 和 darker 屬性值在 Gecko 1.8 型的瀏覽器(Firefox 1.5 betas,等等)上暫時(shí)還無(wú)效。













浙公網(wǎng)安備 33010602011771號(hào)