我一直在玩 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);
}
但这似乎没有效果。图像绘制到位,但整个过程完全不透明。
我是否缺少有关如何设置不透明度的内容?正如您在 fiddle 中看到的,我已经成功地为整个图像设置了 globalAlpha
。只是当我尝试绘制“图像切片”时,它似乎没有效果。
最佳答案
修复它:
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);
希望这对您有所帮助!
关于javascript - 在 HTML Canvas 中创建图像淡入淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14464045/