>  기사  >  웹 프론트엔드  >  HTML5每日一练之Canvas标签的应用

HTML5每日一练之Canvas标签的应用

WBOY
WBOY원래의
2016-05-17 09:09:011280검색

在本节课,你只需要了解即可,不需要大量的练习,我们下节课会用到此函数。

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

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

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

参数 描述
source-over 默认,相交部分由后绘制图形的填充(颜色,渐变,纹理)覆盖,全部浏览器通过
source-in 只绘制相交部分,由后绘制图形的填充覆盖,其余部分透明,webkit两兄弟没有通过
source-out 只绘制后绘制图形不相交的部分,由后绘制图形的填充覆盖,其余部分透明,webkit两兄弟没有通过
source-atop 后绘制图形不相交的部分透明,相交部分由后绘制图形的填充覆盖,全部浏览器通过
destination-over 相交部分由先绘制图形的填充(颜色,渐变,纹理)覆盖,全部浏览器通过
destination-in 只绘制相交部分,由先绘制图形的填充覆盖,其余部分透明,webkit两兄弟没有通过
destination-out 只绘制先绘制图形不相交的部分,由先绘制图形的填充覆盖,其余部分透明,全部浏览器通过
destination-atop 先绘制图形不相交的部分透明,相交部分由先绘制图形的填充覆盖,webkit两兄弟没有通过
lighter 相交部分由根据先后图形填充来增加亮度,全部浏览器通过
darker 相交部分由根据先后图形填充来降低亮度,chrome识别,firefox官方说Firefox3.6以后版本不支持,safari看似可以,但是无论你什么颜色,它都给填充成黑色,opera无效果。
copy 只绘制后绘制图形,只有opera通过
xor 相交部分透明,全部浏览器通过

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.