在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)

但这似乎没有效果.图像被绘制到位,但它始终是完全不透明的.

我错过了一些关于如何设置不透明度的内容吗？正如你在小提琴中看到的那样,我已成功设定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);

希望这可以帮助!