如何在画布元素绘制后更改元素的不透明度?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (105)

使用HTML 5<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';
}
提问于
用户回答回答于

使用的一些简单示例代码globalAlpha:

ctx.save();
ctx.globalAlpha = 0.4;
ctx.drawImage(img, x, y);
ctx.restore();

如果你需要img装载:

var img = new Image();
img.onload = function() {
    ctx.save();
    ctx.globalAlpha = 0.4;
    ctx.drawImage(img, x, y);
    ctx.restore()
};
img.src = "http://...";
用户回答回答于

可以尝试下这个cvs

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

扫码关注云+社区

领取腾讯云代金券