Canvas里的
globalCompositeOperation是個(gè)很少用到的函數(shù),不太熟悉程序繪圖的同學(xué)們估計(jì)壓根都不知道這玩意是干什么的.
簡(jiǎn)單來(lái)說(shuō),
Composite(組合),就是對(duì)你在繪圖中,后繪制的圖形與先繪制的圖形之間的組合顯示效果,比如在國(guó)畫(huà)中,你先畫(huà)一筆紅色,再來(lái)一筆綠色,相交的部分是一種混色,而在油畫(huà)中,綠色就會(huì)覆蓋掉相交部分的紅色,這在程序繪圖中的處理就是Composite,Canvas API中對(duì)應(yīng)的函數(shù)就是globalCompositeOperation,跟globalAlpha一樣,這個(gè)屬性是全局的,所以在使用的時(shí)候要注意save和restore.
我在練習(xí)這個(gè)函數(shù)的時(shí)候,用的是chrome瀏覽器,但是測(cè)試結(jié)果卻跟實(shí)際應(yīng)該出現(xiàn)的結(jié)果不太一致,開(kāi)始我以為是寫錯(cuò)了,檢查數(shù)遍卻沒(méi)有問(wèn)題,疑惑之下?lián)Q了各種瀏覽器來(lái)測(cè)試,真是囧啊,每個(gè)瀏覽器居然都不一樣,連同核心的chrome和safari都不一樣...下面是測(cè)試結(jié)果.
chrome
firefox
opera
safari
firefox官方網(wǎng)站給的實(shí)際效果圖下面是每一個(gè)選項(xiàng)的說(shuō)明(我表達(dá)的可能不太明白,看圖吧):
source-over 默認(rèn),相交部分由后繪制圖形的填充(顏色,漸變,紋理)覆蓋,全部瀏覽器通過(guò)
source-in 只繪制相交部分,由后繪制圖形的填充覆蓋,其余部分透明,webkit兩兄弟沒(méi)有通過(guò)
source-out 只繪制后繪制圖形不相交的部分,由后繪制圖形的填充覆蓋,其余部分透明,webkit兩兄弟沒(méi)有通過(guò)
source-atop 后繪制圖形不相交的部分透明,相交部分由后繪制圖形的填充覆蓋,全部瀏覽器通過(guò)
destination-over 相交部分由先繪制圖形的填充(顏色,漸變,紋理)覆蓋,全部瀏覽器通過(guò)
destination-in 只繪制相交部分,由先繪制圖形的填充覆蓋,其余部分透明,webkit兩兄弟沒(méi)有通過(guò)
destination-out 只繪制先繪制圖形不相交的部分,由先繪制圖形的填充覆蓋,其余部分透明,全部瀏覽器通過(guò)
destination-atop 先繪制圖形不相交的部分透明,相交部分由先繪制圖形的填充覆蓋,webkit兩兄弟沒(méi)有通過(guò)
lighter 相交部分由根據(jù)先后圖形填充來(lái)增加亮度,全部瀏覽器通過(guò)
darker 相交部分由根據(jù)先后圖形填充來(lái)降低亮度,chrome通過(guò),firefox官方說(shuō)Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0以后版本移除這個(gè)效果-0-,why?safari看似可以,但是無(wú)論你什么顏色,它都給填充成黑色,opera無(wú)效果
copy 只繪制后繪制圖形,只有opera通過(guò)
xor 相交部分透明,全部瀏覽器通過(guò)
結(jié)果太令人無(wú)語(yǔ)了,特別是firefox那個(gè)新版本移除,我靠,為嘛啊?chrome和safari難兄難弟,成績(jī)一塌糊涂,難道是webkit核心的問(wèn)題?safari那個(gè)填充黑色很有IE6-中png透明問(wèn)題的風(fēng)范...opera表現(xiàn)很搶眼,只有一個(gè)效果未實(shí)現(xiàn),繼續(xù)努力!
評(píng)分及瀏覽器版本:
Chrome dev 7.0.503.0 : 7/12
Firefox 3.6.6 : 10/12
Opera 10.53 : 11/12
Safari 4.0.3(531.9.1) : 6/12