发表新帖
发表新帖

How to change the opacity (alpha, transparency) of an element in a canvas element after it has been drawn?

前端 未结
关注
8 1070
庸人自扰
庸人自扰 2020-11-27 09:51

Using the HTML5 element, I would like to load an image file (PNG, JPEG, etc.), draw it to the canvas completely transparently, and then fade it i

相关标签:
8条回答
  • 星月不相逢
    2020-11-27 10:00

    Some simpler example code for using globalAlpha:

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

    If you need img to be loaded:

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

    Notes:

    • Set the 'src' last, to guarantee that your onload handler is called on all platforms, even if the image is already in the cache.

    • Wrap changes to stuff like globalAlpha between a save and restore (in fact use them lots), to make sure you don't clobber settings from elsewhere, particularly when bits of drawing code are going to be called from events.

    0 讨论(0)
  • 天涯浪人
    2020-11-27 10:03

    Edit: The answer marked as "correct" is not correct.

    It's easy to do. Try this code, swapping out "ie.jpg" with whatever picture you have handy:

    <!DOCTYPE HTML>
<html>
    <head>
        <script>
            var canvas;
            var context;
            var ga = 0.0;
            var timerId = 0;

            function init()
            {
                canvas = document.getElementById("myCanvas");
                context = canvas.getContext("2d");
                timerId = setInterval("fadeIn()", 100);
            }

            function fadeIn()
            {
                context.clearRect(0,0, canvas.width,canvas.height);
                context.globalAlpha = ga;
                var ie = new Image();
                ie.onload = function()
                {
                    context.drawImage(ie, 0, 0, 100, 100);
                };
                ie.src = "ie.jpg";

                ga = ga + 0.1;
                if (ga > 1.0)
                {
                    goingUp = false;
                    clearInterval(timerId);
                }
            }
        </script>
    </head>
    <body onload="init()">
        <canvas height="200" width="300" id="myCanvas"></canvas>
    </body>
</html>

    The key is the globalAlpha property.

    Tested with IE 9, FF 5, Safari 5, and Chrome 12 on Win7.

    0 讨论(0)
  • 野性不改
    2020-11-27 10:07

    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
ctx.fillStyle = "rgba(255, 255, 255, 0.5)";

    I have concluded that setting the globalCompositeOperation works with images. 

    //works with images
ctx.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.

    0 讨论(0)
  • 忘了有多久
    2020-11-27 10:19

    If you use jCanvas library you can use opacity property when drawing. If you need fade effect on top of that, simply redraw with different values.

    0 讨论(0)
  • Happy的楠姐
    2020-11-27 10:20

    I think this answers the question best, it actually changes the alpha value of something that has been drawn already. Maybe this wasn't part of the api when this question was asked.

    given 2d context c.

    function reduceAlpha(x, y, w, h, dA) {
    var screenData = c.getImageData(x, y, w, h);
    for(let i = 3; i < screenData.data.length; i+=4){
    screenData.data[i] -= dA; //delta-Alpha
    }
    c.putImageData(screenData, x, y );
}
    0 讨论(0)
  • 借酒劲吻你
    2020-11-27 10:24

    The post is old so far I'll go with my suggestion. Suggestion is based on pixel manipulation in canvas 2d context. From MDN:

    You can directly manipulate pixel data in canvases at the byte level

    To manipulate pixels we'll use two functions here - getImageData and putImageData

    getImageData function usage:

    var myImageData = context.getImageData(left, top, width, height);

    and putImageData syntax:

    context.putImageData(myImageData, dx, dy); //dx, dy - x and y offset on your canvas

    Where context is your canvas 2d context

    So to get red green blue and alpha values, we'll do the following:

    var r = imageData.data[((x*(imageData.width*4)) + (y*4))];
var g = imageData.data[((x*(imageData.width*4)) + (y*4)) + 1];
var b = imageData.data[((x*(imageData.width*4)) + (y*4)) + 2];
var a = imageData.data[((x*(imageData.width*4)) + (y*4)) + 3];

    Where x is x offset, y is y offset on canvas

    So we having code making image half-transparent

    var canvas = document.getElementById('myCanvas');
var c = canvas.getContext('2d');
var img = new Image();
img.onload  = function() {
   c.drawImage(img, 0, 0);
   var ImageData = c.getImageData(0,0,img.width,img.height);
   for(var i=0;i<img.height;i++)
      for(var j=0;j<img.width;j++)
         ImageData.data[((i*(img.width*4)) + (j*4) + 3)] = 127;//opacity = 0.5 [0-255]
   c.putImageData(ImageData,0,0);//put image data back
}
img.src = 'image.jpg';

    You can make you own "shaders" - see full MDN article here

    0 讨论(0)
 看不清?
提交回复
热议问题