How to draw transparent image with html5 canvas element

前端未结

关注

 3  1242

I am targeting google chrome. Is it possible to draw transparent images on a canvas? By transparent I mean the drawing the entire image at something like 50% opacity.

相关标签:

3条回答

醉梦人生

2020-12-30 05:26

The canvas element has a global alpha attribute that lets you apply partial transparency to anything you draw.

0 讨论(0)
发布评论:

提交评论
- 加载中...

-上瘾入骨i

2020-12-30 05:40

You can do this using the globalAlpha property, like this:

<!DOCTYPE HTML>
<html>
    <body>
        <canvas height="100" width="100" id="myCanvas"></canvas>
        <script>
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            context.globalAlpha = 0.5;
            var myImage = new Image();
            myImage.src = "someImage.jpg";
            myImage.onload = function()
            {
                context.drawImage(myImage, 0, 0, 100, 100);
            };
        </script>
    </body>
</html>

And yes, it does work with images. Verified with IE 9, FF 5, Safari 5, and Chrome 12 on Win 7.

0 讨论(0)

时光取名叫无心

2020-12-30 05:40

It's possible if you iterate thru the canvas' image-data and set the alpha value manually, then export the transparent image with the canvas.toDataURL method and insert it into another canvas.

0 讨论(0)
发布评论:

提交评论
- 加载中...