HTML5每日一练之Canvas标签的应用-H5 Tutorial-php.cn

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

WBOY

Release： 2016-05-17 09:09:01

Original

1303 people have browsed it

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

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	相交部分透明,全部浏览器通过