使用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, 0);
}
img.src = 'image.jpg';
}
有没有人能给我指个正确的方向，比如要设置的属性或者要调用的可以改变不透明度的函数？
我也在寻找这个问题的答案，(为了澄清，我希望能够绘制具有用户定义的不透明度的图像，例如如何使用不透明度绘制形状)如果您使用原始形状绘制，您可以使用Alpha设置填充和笔触 colored颜色 来定义透明度.据我目前的结论，这似乎不会影响图像绘制.
//works with shapes but not with images
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
我得出的结论是，设置这globalCompositeOperation件作品是用图像来完成的.
//works with images
ctx.globalCompositeOperation = "lighter";
我想知道是否有第三种设置 colored颜色 的方法，这样我们可以给图像上色，使它们更容易透明.
EDIT:个
进一步挖掘后，我得出结论，在绘制图像之前，可以通过设置globalAlpha参数来设置图像的透明度:
//works with images
ctx.globalAlpha = 0.5
如果你想在一段时间内实现一个淡入淡出的效果，你需要某种循环来改变alpha值，这是相当容易的，实现它的一种方法是setTimeout函数，查看它来创建一个循环，从中你可以随时间改变alpha值.