javascript - 在 HTML Canvas 中创建图像淡入淡出

Question

我一直在玩 HTML canvas，最近开始使用 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);
}

( JSFiddle of my code )

但这似乎没有效果。图像绘制到位，但整个过程完全不透明。

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

Answer 1

修复它:

http://jsfiddle.net/mattdlockyer/zNcRB/

您使用 i + 1 作为 src 图像宽度和 dst 图像宽度在其自身上绘制图像，而不是对两者都使用 1。

真正的罪魁祸首是 dst 图像宽度，但我认为将 1 作为 src 图像宽度可能会提高性能。

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

希望这对您有所帮助!