1

我一直在玩 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了整个图像。只是当我尝试绘制“图像切片”时，它似乎没有效果。

4

1 回答 1

5

修复：

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

希望这可以帮助！

于 2013-01-22T17:19:04.613 回答