如何用html5 canvas元素绘制透明图像

Question

如何用html5 canvas元素绘制透明图像

Mr *_*ell 14 javascript html5 transparency canvas

我的目标是谷歌浏览器.是否可以在画布上绘制透明图像？透明,我的意思是将整个图像绘制为50%不透明度.

Answer 1

您可以使用globalAlpha属性执行此操作,如下所示:

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

Run Code Online (Sandbox Code Playgroud)

是的,它确实适用于图像.在Win 7上验证了IE 9,FF 5,Safari 5和Chrome 12.

Answer 2

Eri*_*sen 14

canvas元素具有全局alpha属性,可以将部分透明度应用于您绘制的任何内容.

归档时间：	15 年，5 月前
查看次数：	38970 次
最近记录：	8 年，9 月前