如何更改画布元素中元素的不透明度(Alpha、透明度)?

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

本文介绍了如何更改画布元素中元素的不透明度(Alpha、透明度)?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

使用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、透明度)?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:如何更改画布元素中元素的不透明度(Alpha、透明度)?

基础教程推荐