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