如何添加alpha的2张图片，所以结果是alpha = 1

JavaScript - how to add alphas of 2 images so the result is alpha = 1?

本文关键字：alpha 结果是 2张 何添加 添加      更新时间：2023-09-26

我需要在两个图像之间进行过渡-两个图像都是隐藏精灵的蒙版。每个掩模一部分是白色的，一部分是透明的。我需要两个图像的总alpha值每次都为1，这样看起来蒙版会平滑地改变形状。如果我对image1使用从1到0的转换，对image2使用从0到1的转换，然后将两个图像相互绘制，那么结果不是alpha1 + alpha2 = 1。有什么办法能拿到吗?非常感谢，瓦茨拉夫·

我认为这是画布的默认行为，在目的地是原始image1(不乘以alpha从1到0)的条件下。

source-over操作执行result = alpha*source + (1-alpha)*dest，即使对于alpha通道也是如此。

我没有遮罩图像来测试它，但我认为这段代码应该做你想要的:

ctx.globalCompositeOperation = 'copy';
ctx.globalAlpha = 1.;
ctx.drawImage(img1, 0, 0);
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = ratio;
ctx.drawImage(img2, 0, 0);

(如果你知道上下文在计算前处于哪个状态，有些行是不必要的)

(顺便说一下，给出一个示例代码来重现您的问题将非常感激)

相关文章：