一、简介
通过设置混合模式来改变图像重叠区域的显示方式。
const ctx = canvas.getContext("2d");ctx.globalCompositeOperation ="source-over";二、属性介绍
-
source-over
这是默认的复合操作。将源图像绘制到目标图像上，保留目标图像的不透明部分。 -
source-in
只在目标图像与源图像重叠的地方绘制源图像，其他地方保持透明。 -
source-out
正文：只在源图像不与目标图像重叠的地方绘制源图像，重叠部分保持透明。 -
source-atop
将源图像绘制到目标图像上，但只保留源图像与目标图像重叠的部分，并且目标图像的不透明部分不会被覆盖。 -
destination-over
与source-over相反，将目标图像绘制到源图像上，保留源图像的不透明部分。 -
destination-in
只在源图像与目标图像重叠的地方绘制目标图像，其他地方保持透明。 -
destination-out
只在目标图像不与源图像重叠的地方绘制目标图像，重叠部分保持透明。 -
destination-atop
将目标图像绘制到源图像上，但只保留目标图像与源图像重叠的部分，并且源图像的不透明部分不会被覆盖。 -
lighter
取源图像与目标图像中颜色值较大的部分进行绘制，效果是两者相加后变得更亮。 -
copy
只绘制源图像，忽略目标图像。 -
xor
对源图像与目标图像进行异或操作，相同颜色的部分变为透明，不同颜色的部分保持原样。 -
multiply
将源图像与目标图像的颜色值相乘，得到更暗的结果。 -
screen
将源图像与目标图像的反色相乘，再取反，得到更亮的结果。 -
overlay
根据源图像与目标图像的亮度，选择multiply或screen效果进行绘制。 -
darken
取源图像与目标图像中颜色值较小的部分进行绘制，效果是变得更暗。 -
lighten
取源图像与目标图像中颜色值较大的部分进行绘制，效果是变得更亮。 -
color-dodge
正文：根据源图像与目标图像的颜色值进行色彩减淡效果，使目标图像的颜色变浅。 -
color-burn
根据源图像与目标图像的颜色值进行色彩加深效果，使目标图像的颜色变深。 -
hard-light
根据源图像的亮度，选择multiply或screen效果对目标图像进行绘制。 -
soft-light
与hard-light类似，但效果更为柔和。 -
difference
取源图像与目标图像的颜色值的差值进行绘制，产生类似负片的效果。 -
exclusion
与difference类似，但效果更为柔和。 -
hue
使用源图像的色调和目标图像的饱和度和亮度进行绘制。 -
saturation
使用源图像的饱和度和目标图像的色调和亮度进行绘制。 -
color
使用源图像的色调和饱和度，以及目标图像的亮度进行绘制。 -
luminosity
使用源图像的亮度，以及目标图像的色调和饱和度进行绘制。
三、简单体验一下
缓若江海凝清光
上一章：从零开始学习在VUE3中使用canvas(四)：globalAlpha(全局透明度)-CSDN博客
下一章：从零开始学习在VUE3中使用canvas(六)：lineCap(线条端点样式)-CSDN博客
