—— globalCompositeOperation

弄清 source-* 和 destination-* ：前八个合成属性为图形层级关系。source 指源，新绘制的图形；destination 指目标，已绘制好的图形。上面演示，图形分两部分：一，矩形图片是目标，是事先绘制好的图形；二，三个红蓝绿圆球，三个圆同在一张图片，这是源，是后面绘制上去的新图形。为方便理解，以下的描述将先绘制的目标图像说成现有图形，后绘制的源图像说成新图形或新绘制图形。

简单理解就是：上面的演示，矩形部分是先绘制好的图像，是目标即现有图形；红蓝绿圆球是一个整体，是源，后面追加绘制上去的新图形。

合成属性含义：

一、层级关系属性

1. source-over : 默认，在现有图形上绘制新图形；

2. source-in : 在现有图形上绘制新图形，现有图形变成透明；

3. source-out : 在现有图形之外绘制新图形，现有图形透明、现有图形之内的新绘图图形透明；

4. source-atop ：在现有图形顶部绘制新图形，现有图形之外的新图形不显示；

5. destination-over : 现有图形处在新绘制图形的上层，绘制于现有图形内的新图形被覆盖；

6. destination-in : 在新绘制图形内显示现有图形，只有两个图形交合的部分渲染出来，其余区域透明；

7. destination-out : 和 destination-in 相反，在新绘制图形外显示现有图形，新绘制图形全部透明；

8. destination-atop : 现有图形处在新绘制图形顶层，但现有图形仅保留和新绘制图形重叠部分；

二、融合关系属性

9. lighter : 两个重叠图形的颜色通过颜色值相加来确定；

10. copy : copy为复制之意，只显示新图形，也就是拷贝新图形覆盖了现有图形；

11. xor : 形状在重叠处变为透明，并在其他地方正常绘制；

12. multiply : 将顶层像素与底层相应像素相乘，结果是一幅更黑暗的图片；

13. screen : 像素被倒转、相乘、再倒转，结果是一幅更明亮的图片（与 multiply 相反）；

14. overlay : multiply 和 screen 的结合。原本暗的地方更暗，原本亮的地方更亮；

15. darken : 保留两个图层中最暗的像素；

16. lighten : 保留两个图层中最亮的像素；

17. color-dodge : 将底层除以顶层的反置；

18. color-burn : 将反置的底层除以顶层，然后将结果反过来；

19. hard-light : 类似于 overlay，multiply 和 screen 的结合，但上下图层互换了；

20. soft-light : 柔和版本的 hard-light。纯黑或纯白不会导致纯黑或纯白；

21. difference : 从顶层减去底层（或反之亦然），始终得到正值；

22. exclusion : 与 difference 类似，但对比度较低；

23. hue : 保留底层的亮度（luma）和色度（chroma），同时采用顶层的色调（hue）；

24. saturation : 保留底层的亮度和色调，同时采用顶层的色度；

25. color : 保留了底层的亮度，同时采用了顶层的色调和色度；

26. luminosity : 保持底层的色调和色度，同时采用顶层的亮度。