使用HTML5< canvas>元素，我想加载图像文件(PNG，JPEG等)，将其完全透明地绘制到画布，然后淡入它。我已经知道如何加载图像并将其绘制到画布上，但我不知道如何改变它的不透明度一旦它被绘制。
这里是我到目前为止的代码：
var canvas = document.getElementById('myCanvas');
if (canvas.getContext)
{
var c = canvas.getContext('2d');
c.globalAlpha = 0;
var img = new Image();
img.onload = function() {
c.drawImage(img,0);
}
img.src = 'image.jpg';
}
解决方法
我也在寻找这个问题的答案(澄清，我想能够绘制一个图像与用户定义的不透明度，如你可以如何绘制不透明度的形状)如果你绘制基本形状，你可以设置填充和笔画用alpha定义透明度的颜色。就目前我已经得出结论，这似乎并不影响图像绘制。
//works with shapes but not with images canvas2d.fillStyle = "rgba(255,255,0.5)";
我得出结论，设置globalCompositeOperation可以使用图像。
//works with images canvas2d.globalCompositeOperation = "lighter";
我不知道是否有某种第三种方式设置颜色，以便我们可以着色图像，使它们容易透明。
编辑：
进一步挖掘后，我得出结论，你可以通过设置globalAlpha参数之前绘制图像设置图像的透明度：
//works with images ctx.globalAlpha = 0.5
如果你想实现渐变效果随着时间的推移，你需要一些改变alpha值的循环，这是相当容易的，一种方法来实现它是setTimeout函数，看起来创建一个循环，从中你改变alpha随着时间的推移。
