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
分享到:
相关推荐
2.40_Canvas与浏览器兼容性|Canvas高级内容2|Canvas图形、动画、游戏开发从入门到精通全系列课程
canvas制图 canvas是浏览器提供的绘图机制,使用canvas 标签和js脚本绘图想要绘制的图形
用于各个浏览器(IE)html2canvas不工作解决方案 html2canvas在火狐、Chrome等浏览器好用,但是IE浏览器无效,导入这个js后就OK啦
在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之上,那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面。 简单点讲,在Canvas中,把图像源和目标图像,通过Canvas中的 ...
主要介绍了canvas 画布在主流浏览器中的尺寸限制详细介绍的相关资料,canvas在不同浏览器下面有不同的最大尺寸限制,这里测试下,需要的朋友可以参考下
内容概要:canvas案例,色盘、颜色过渡。 实现技术:htm+js实现。双击浏览器打开即可看效果 能学到什么:canvas技术 适用人群: 前端canvas学习新手 阅读建议:支持canvas的浏览器
手机移动端h5电子签名插件canvas_sign 兼容Web.zip 手机移动端h5电子签名插件canvas_sign 兼容Web.zip 手机移动端h5电子签名插件canvas_sign 兼容Web.zip
第一个想到的是使用a标签的download属性来实现,但是在不同浏览器下测试会发现,有的浏览器无效,点击后直接预览图片,所以,上网找到了另外一种兼容不同浏览器的图片下载的方法,那就是利用canvas来处理图片,实现...
解决在ie下的canvas兼容显示问题,特别是需哟兼容低版本的时候
内容概要:canvas案例,弹性小球下落实现。(弹跳效果) 实现技术:htm+js实现。双击浏览器打开即可看效果 能学到什么:canvas技术 适用人群: 前端canvas学习新手 阅读建议:支持canvas的浏览器
主要介绍了html5使用html2canvas实现浏览器截图的示例,非常具有实用价值,需要的朋友可以参考下
canvas例子,如何获取鼠标在canvas中的位置。html+js。下载双击即可在浏览器运行,F12可查看源代码。
使不兼容canvas的浏览器兼容canvas
主要为大家详细介绍了html5 canvas移动浏览器上实现图片压缩上传的相关方法,提出了解决方法,分享了解决问题的思路,感兴趣的小伙伴们可以参考一下
主要介绍了使用html2canvas实现浏览器截图的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Scratchcard-js ScratchCard是一个js库,用于在使用html5和canvas的浏览器中模拟刮刮卡。 您可以看到演示页面。 安装您可以使用npm安装ScratchCard:npm install --save scratchcard-js或j Scratchcard-js Scratch...
让IE兼容 HTML5的canvas标签 excanvas的文件
1.运用 canvas 实现 图片上传压缩 2.包含 将图片转为Base64位 以及转为Blob对象
主要介绍了HTML5 Canvas之测试浏览器是否支持Canvas的方法,本文给出了两种原生方法和一个modernizr类库,需要的朋友可以参考下