2023年微信小程序API 绘图·globalCompositeOperation

什么是canvasContext.globalCompositeOperation?

canvasContext.globalCompositeOperation是微信小程序API中的一种绘图属性，在基础库1.9.90版本起开始支持，它用于设置在绘制新形状时需要应用的合成操作类型。

如何使用canvasContext.globalCompositeOperation？

通过type参数传入所需的操作类型即可使用，type支持的操作有：

1. xor：异或合成
2. source-over：在目标图像上显示源图像
3. source-atop：在目标图像顶部显示源图像，其他部分则会变为透明
4. destination-out：目标图像中与源图像重叠的部分变为透明，但不影响源图像
5. lighter：将源图像与目标图像相加，使得看起来比原来更亮
6. overlay：覆盖合成，在进行此操作后，源图像会变暗，而目标图像会变亮
7. darken：只有源图像和目标图像交集处的颜色才会保留，其他部分变黑色
8. lighten：只有源图像和目标图像交集处的颜色才会保留，其他部分变白色
9. hard-light：颜色加深和变亮的混合模式，具体效果取决于源图像
10. multiply：正片叠底，将每个像素的颜色值乘以目标图像相应像素的颜色值
11. destination-over：在源图像顶部显示目标图像，其他部分则会变为透明
12. color-dodge：只有源图像与目标图像重叠处才保持原色，其他部分减轻曝光度
13. color-burn：深色烧焦，降低源图像某些区域的曝光度，以增强目标图像
14. soft-light：光滑减淡，根据源图像中颜色的程度和目标图像产生不同程度的颜色反差
15. difference：差异合成，将源图像颜色值减去目标图像颜色值的绝对值，并通过160来调整结果
16. exclusion：排除合成，在源和目标图像中没有重叠的地方显示出来，黑色区域没有反应，白色区域则完全反转
17. saturation：饱和度
18. luminosity：亮度

常用的操作类型

1. source-over

source-over是默认的操作类型，这意味着新的形状将绘制在之前的形状上方。下面是一个实现这个效果的例子：

// 在画布上创建两个矩形
context.beginPath();
context.fillStyle = 'red';
context.fillRect(10, 10, 50, 50);
context.fillStyle = 'blue';
context.fillRect(30, 30, 50, 50);

// 绘制橙色矩形，在前面两个矩形的顶部
context.beginPath();
context.globalCompositeOperation = 'source-over';
context.fillStyle = 'orange';
context.fillRect(20, 20, 50, 50);

以上代码会在最初绘制出红色和蓝色的两个矩形，并在其顶部