我需要在两个图像之间进行转换 - 两个图像都是隐藏下面的 Sprite 的蒙版。每个面具的一部分是白色的，一部分是透明的。我需要两个图像的总 alpha 每次都为 1，这样蒙版看起来会平滑地改变其形状。 如果我对 image1 使用从 1 到 0 的 alpha 过渡，对 image2 使用从 0 到 1 的 alpha 过渡，然后将两个图像相互绘制，那么结果不是 alpha1 + alpha2 = 1。有什么方法可以得到它吗？ 多谢， 瓦茨拉夫
最佳答案
我认为这是 Canvas 的默认行为，条件是目标是原始 image1(未乘以从 1 到 0 的 alpha)。
source-over 操作的结果是result = alpha*source + (1-alpha)*dest，即使对于 Alpha channel 也是如此。
我没有 mask 图像来测试它，但我认为这段代码应该满足您的要求:
ctx.globalCompositeOperation = 'copy';
ctx.globalAlpha = 1.;
ctx.drawImage(img1, 0, 0);
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = ratio;
ctx.drawImage(img2, 0, 0);
(如果您知道计算之前上下文处于哪种状态，则有些行是不必要的)
<小时/>(顺便说一句，如果能提供示例代码来重现您问题中的问题，我们将不胜感激)
关于JavaScript - 如何添加 2 个图像的 alpha 以使结果 alpha = 1？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25454861/