Question

我的目标是google chrome。是否可以在画布上绘制透明图像？透明，我的意思是将整个图像绘制为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>

是的，它适用于图像。在Win 7上通过IE 9，FF 5，Safari 5和Chrome 12验证。

Answer 2

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

Answer 3

如果您通过画布'image-data迭代并手动设置alpha值，然后使用canvas.toDataURL方法导出透明图像并将其插入另一个画布中，则可能。

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

3 个答案: