Javascript 在HTML画布中创建图像淡入淡出

我一直在玩HTML画布，最近开始用context.globalAlpha更改图像的不透明度。我认为写一个小脚本自动淡出一个图像会很有趣。在图像的左侧，globalAlpha将为1完全不透明，而在最右侧，globalAlpha将为0完全透明

我尝试对源图像进行1像素宽的切片，并将globalAlpha设置为逐渐减少的数字：

fadeCtx = fadeCanvas.getContext('2d');

for (var i = 0; i < sourceImage.width; i++) {
    fadeCtx.globalAlpha = (sourceImage.width - i) / sourceImage.width;
    console.log(fadeCtx.globalAlpha);
    fadeCtx.drawImage(sourceImage, i, 0, i + 1, sourceImage.height, i, 0, i + 1,    sourceImage.height);
}

但这似乎没有效果。图像绘制到位，但始终完全不透明

我是否缺少关于如何设置不透明度的内容？正如您在小提琴中看到的，我已经成功地为整个图像设置了globalAlpha。只是当我尝试绘制图像切片时，它似乎没有效果。

修复了它：

您使用i+1作为src图像宽度和dst图像宽度绘制图像，而不是同时使用1

真正的问题是dst图像宽度，但我认为对src图像宽度使用1可能会提高性能

fadeCtx.drawImage(sourceImage, i, 0, 1, sourceImage.height, i, 0, 1, sourceImage.height);

希望这有帮助

修复了它：

您使用i+1作为src图像宽度和dst图像宽度绘制图像，而不是同时使用1

真正的问题是dst图像宽度，但我认为对src图像宽度使用1可能会提高性能

fadeCtx.drawImage(sourceImage, i, 0, 1, sourceImage.height, i, 0, 1, sourceImage.height);

---

希望这有帮助

每次绘制新图像时，都需要清除画布。ctx不是免费为你做的。没有真正回答问题，也没有真正的帮助。。。查看我的解决方案。每次绘制新图像时，都需要清除画布。ctx不是免费为你做的。没有真正回答问题，也没有真正的帮助。。。看看我的解决方案。