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）

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

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

希望这有帮助！

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

1 个答案: