Canvas globalCompositeOperation浏览器兼容性测试

[b]Canvas[/b]里的[b]globalCompositeOperation[/b]是个很少用到的函数,不太熟悉程序绘图的同学们估计压根都不知道这玩意是干什么的.

简单来说,[b]Composite(组合)[/b],就是对你在绘图中,后绘制的图形与先绘制的图形之间的组合显示效果,比如在国画中,你先画一笔红色,再来一笔绿色,相交的部分是一种混色,而在油画中,绿色就会覆盖掉相交部分的红色,这在程序绘图中的处理就是Composite,Canvas API中对应的函数就是globalCompositeOperation,跟globalAlpha一样,这个属性是全局的,所以在使用的时候要注意save和restore.

我在练习这个函数的时候,用的是chrome浏览器,但是测试结果却跟实际应该出现的结果不太一致,开始我以为是写错了,检查数遍却没有问题,疑惑之下换了各种浏览器来测试,真是囧啊,每个浏览器居然都不一样,连同核心的chrome和safari都不一样...下面是测试结果.

[img]http://dl.iteye.com/upload/picture/pic/71054/9f086ab0-932c-3195-884b-cfc8aa3d8ce4.jpg[/img]
[size=large]chrome[/size]

[img]http://dl.iteye.com/upload/picture/pic/71056/bb7bff56-5939-36bb-b325-f82695410862.jpg[/img]
[size=large]firefox[/size]

[img]http://dl.iteye.com/upload/picture/pic/71058/9292f201-bb95-30ec-8920-b9836bd20baa.jpg[/img]
[size=large]opera[/size]

[img]http://dl.iteye.com/upload/picture/pic/71060/8742ecdb-3f3c-3840-82df-90c846e80f5b.jpg[/img]
[size=large]safari[/size]

[img]http://dl.iteye.com/upload/picture/pic/71062/af2e011f-faa8-3f70-819a-8f445dae60a0.jpg[/img]
[size=large]firefox官方网站给的实际效果图[/size]

下面是每一个选项的说明(我表达的可能不太明白,看图吧):

[b]source-over[/b] 默认,相交部分由后绘制图形的填充(颜色,渐变,纹理)覆盖,全部浏览器通过

[b]source-in[/b] 只绘制相交部分,由后绘制图形的填充覆盖,其余部分透明,webkit两兄弟没有通过

[b]source-out[/b] 只绘制后绘制图形不相交的部分,由后绘制图形的填充覆盖,其余部分透明,webkit两兄弟没有通过

[b]source-atop[/b] 后绘制图形不相交的部分透明,相交部分由后绘制图形的填充覆盖,全部浏览器通过

[b]destination-over[/b] 相交部分由先绘制图形的填充(颜色,渐变,纹理)覆盖,全部浏览器通过

[b]destination-in[/b] 只绘制相交部分,由先绘制图形的填充覆盖,其余部分透明,webkit两兄弟没有通过

[b]destination-out[/b] 只绘制先绘制图形不相交的部分,由先绘制图形的填充覆盖,其余部分透明,全部浏览器通过

[b]destination-atop[/b] 先绘制图形不相交的部分透明,相交部分由先绘制图形的填充覆盖,webkit两兄弟没有通过

[b]lighter[/b] 相交部分由根据先后图形填充来增加亮度,全部浏览器通过

[b]darker[/b] 相交部分由根据先后图形填充来降低亮度,chrome通过,firefox官方说Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0以后版本移除这个效果-0-,why?safari看似可以,但是无论你什么颜色,它都给填充成黑色,opera无效果

[b]copy[/b] 只绘制后绘制图形,只有opera通过

[b]xor[/b] 相交部分透明,全部浏览器通过

结果太令人无语了,特别是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