如何在绘制之后更改canvas元素中的元素的不透明度（alpha，透明度）？ [英] How to change the opacity (alpha, transparency) of an element in a canvas element after it has been drawn?

问题描述

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

  //适用于形状，但不适用于图片
 canvas2d.fillStyle =rgba（255，255，255， 0.5）; 
  

我的结论是设置globalCompositeOperation可以使用图像。

  //与图片一起使用
 canvas2d.globalCompositeOperation =lighter 
  

我不知道有没有第三种方法来设置颜色，

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

  //与图像一起使用
 ctx.globalAlpha = 0.5 
  

如果你想实现一段时间的衰落效果，循环改变alpha值，这是相当容易，实现它的一种方法是setTimeout函数，看起来，创建一个循环，从中你改变alpha随着时间的推移。

Using the HTML5 <canvas> element, I would like to load an image file (PNG, JPEG, etc.), draw it to the canvas completely transparently, and then fade it in. I have figured out how to load the image and draw it to the canvas, but I don't know how to change its opacity once it as been drawn.

Here's the code I have so far:

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

Will somebody please point me in the right direction like a property to set or a function to call that will change the opacity?

解决方案

I am also looking for an answer to this question, (to clarify, i want to be able to draw an image with user defined opacity such as how you can draw shapes with opacity) if you draw with primitive shapes you can set fill and stroke color with alpha to define the transparency. As far as i have concluded right now, this does not seem to affect image drawing.

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

I have concluded that setting the globalCompositeOperation works with images.

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

I wonder if there is some kind third way of setting color so that we can tint images and make them transparent easily.

EDIT:

After further digging i have concluded that you can set the transparency of an image by setting the globalAlpha parameter BEFORE you draw the image:

//works with images
ctx.globalAlpha = 0.5

If you want to achieve a fading effect over time you need some kind of loop that changes the alpha value, this is fairly easy, one way to achieve it is the setTimeout function, look that up to create a loop from which you alter the alpha over time.

这篇关于如何在绘制之后更改canvas元素中的元素的不透明度（alpha，透明度）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！