http://www.cnblogs.com/jenry/archive/2012/02/11/2347012.html
Canvas裏的globalCompositeOperation是個很少用到的函數,不太熟悉程序繪圖的同學們估計壓根都不知道這玩意是幹什麼的.
簡單來說,Composite(組合),就是對你在繪圖中,後繪製的圖形與先繪製的圖形之間的組合顯示效果,比如在國畫中,你先畫一筆紅色,再來一筆綠色,相交的部分是一種混色,而在油畫中,綠色就會覆蓋掉相交部分的紅色,這在程序繪圖中的處理就是Composite,Canvas API中對應的函數就是globalCompositeOperation,跟globalAlpha一樣,這個屬性是全局的,所以在使用的時候要注意save和restore.
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表現很搶眼,只有一個效果未實現,繼續努力!