如何更改画布元素中元素的不透明度(Alpha、透明度)？ [英] How to change the opacity (alpha, transparency) of an element in a canvas element?

问题描述

使用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设置填充和笔触颜色来定义透明度。据我目前的结论，这似乎不会影响图像绘制。

//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值。

这篇关于如何更改画布元素中元素的不透明度(Alpha、透明度)？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！