如何用Max操作合成两个Alpha通道？Canvas场景实现求助

问题场景 #

我在Canvas中绘制两个重叠的半透明图形，代码如下：

context.fillStyle = "rgba(0, 0, 0, 0.25)";
context.globalCompositeOperation = "copy";
context.fillRect(50, 50, 200, 200);
context.globalCompositeOperation = "??????";
context.fillRect(150, 150, 200, 200);

需求是：绘制完成后，每个像素的RGB值固定为(0, 0, 0)，Alpha值取两个图形Alpha通道的最大值——即只要像素属于任意一个正方形，Alpha值就是0.25，否则透明，整个绘制区域颜色均匀。

之前尝试用lighter或darker模式时，两个正方形的重叠区域会出现颜色加深的问题，不符合需求。

解决方案 #

Canvas标准的globalCompositeOperation中，lighten模式正好符合需求：它会对源像素和目标像素的每个颜色通道（包括Alpha）取最大值。因为两个图形的RGB都是黑色，重叠区域的RGB仍为黑色；Alpha通道取max(0.25, 0.25)，结果还是0.25，完美实现“只要被任意正方形覆盖就保持0.25透明度”的效果。

修改后的代码如下：

context.fillStyle = "rgba(0, 0, 0, 0.25)";
context.globalCompositeOperation = "copy";
context.fillRect(50, 50, 200, 200);
// 使用lighten模式替代占位符
context.globalCompositeOperation = "lighten";
context.fillRect(150, 150, 200, 200);

备选方案（兼容旧环境） #

如果需要兼容不支持lighten模式的旧环境，可以通过分层绘制实现：

1. 先绘制第二个矩形
2. 切换为destination-over模式（在现有内容下方绘制）
3. 绘制第一个矩形

代码示例：

context.fillStyle = "rgba(0, 0, 0, 0.25)";
// 先画右侧矩形
context.fillRect(150, 150, 200, 200);
// 切换混合模式为destination-over，在已有图形下方绘制左侧矩形
context.globalCompositeOperation = "destination-over";
context.fillRect(50, 50, 200, 200);
// 恢复默认混合模式
context.globalCompositeOperation = "source-over";

这种方式下，两个矩形的Alpha不会叠加，最终所有被覆盖的区域透明度都是0.25。

内容的提问来源于stack exchange，提问作者Jack M