在本节课，你只需要了解即可，不需要大量的练习，我们下节课会用到此函数。
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 | 相交部分透明,全部浏览器通过 |
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
