html - 如何更改 Canvas 元素中元素的不透明度(alpha、透明度)？

Question

使用 HTML5 <canvas>元素，我想加载一个图像文件(PNG，JPEG等)，将其完全透明地绘制到 Canvas 上，然后将其淡入。我已经弄清楚如何加载图像并将其绘制到 Canvas 上，但是我不知道如何改变它的不透明度。

这是我目前的代码:

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';
}

是否有人请我指出正确的方向，例如要设置的属性或要调用的函数来改变不透明度？

Answer 1

我也在寻找这个问题的答案，(澄清一下，我希望能够绘制具有用户定义的不透明度的图像，例如如何绘制具有不透明度的形状)如果您使用可以设置的原始形状进行绘制使用 alpha 填充和描边颜色以定义透明度。据我现在得出的结论，这似乎不会影响图像绘制。

//works with shapes but not with images
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";

我已经得出结论，设置 globalCompositeOperation 适用于图像。

//works with images
ctx.globalCompositeOperation = "lighter";

我想知道是否有第三种设置颜色的方法，以便我们可以轻松地为图像着色并使其透明。

编辑:

经过进一步挖掘，我得出结论，您可以在绘制图像之前通过设置 globalAlpha 参数来设置图像的透明度:

//works with images
ctx.globalAlpha = 0.5

如果你想随着时间的推移实现淡化效果，你需要某种改变 alpha 值的循环，这相当容易，实现它的一种方法是 setTimeout 函数，查看创建一个循环，您可以从该循环中随时间改变 alpha。