一、简介

通过设置混合模式来改变图像重叠区域的显示方式。

  const ctx = canvas.getContext("2d");
  ctx.globalCompositeOperation ="source-over";

二、属性介绍

1. source-over
   这是默认的复合操作。将源图像绘制到目标图像上，保留目标图像的不透明部分。

2. source-in
   只在目标图像与源图像重叠的地方绘制源图像，其他地方保持透明。

3. source-out
   正文：只在源图像不与目标图像重叠的地方绘制源图像，重叠部分保持透明。

4. source-atop
   将源图像绘制到目标图像上，但只保留源图像与目标图像重叠的部分，并且目标图像的不透明部分不会被覆盖。

5. destination-over
   与source-over相反，将目标图像绘制到源图像上，保留源图像的不透明部分。

6. destination-in
   只在源图像与目标图像重叠的地方绘制目标图像，其他地方保持透明。

7. destination-out
   只在目标图像不与源图像重叠的地方绘制目标图像，重叠部分保持透明。

8. destination-atop
   将目标图像绘制到源图像上，但只保留目标图像与源图像重叠的部分，并且源图像的不透明部分不会被覆盖。

9. lighter
   取源图像与目标图像中颜色值较大的部分进行绘制，效果是两者相加后变得更亮。

10. copy
    只绘制源图像，忽略目标图像。

11. xor
    对源图像与目标图像进行异或操作，相同颜色的部分变为透明，不同颜色的部分保持原样。

12. multiply
    将源图像与目标图像的颜色值相乘，得到更暗的结果。

13. screen
    将源图像与目标图像的反色相乘，再取反，得到更亮的结果。

14. overlay
    根据源图像与目标图像的亮度，选择multiply或screen效果进行绘制。

15. darken
    取源图像与目标图像中颜色值较小的部分进行绘制，效果是变得更暗。

16. lighten
    取源图像与目标图像中颜色值较大的部分进行绘制，效果是变得更亮。

17. color-dodge
    正文：根据源图像与目标图像的颜色值进行色彩减淡效果，使目标图像的颜色变浅。

18. color-burn
    根据源图像与目标图像的颜色值进行色彩加深效果，使目标图像的颜色变深。

19. hard-light
    根据源图像的亮度，选择multiply或screen效果对目标图像进行绘制。

20. soft-light
    与hard-light类似，但效果更为柔和。

21. difference
    取源图像与目标图像的颜色值的差值进行绘制，产生类似负片的效果。

22. exclusion
    与difference类似，但效果更为柔和。

23. hue
    使用源图像的色调和目标图像的饱和度和亮度进行绘制。

24. saturation
    使用源图像的饱和度和目标图像的色调和亮度进行绘制。

25. color
    使用源图像的色调和饱和度，以及目标图像的亮度进行绘制。

26. luminosity
    使用源图像的亮度，以及目标图像的色调和饱和度进行绘制。

三、简单体验一下

缓若江海凝清光

上一章：从零开始学习在VUE3中使用canvas(四)：globalAlpha(全局透明度)-CSDN博客

下一章：从零开始学习在VUE3中使用canvas(六)：lineCap(线条端点样式)-CSDN博客