如何使用html5画布元素绘制透明图像答案

【问题标题】：How to draw transparent image with html5 canvas element如何使用html5画布元素绘制透明图像
【发布时间】：2011-02-24 09:46:32
【问题描述】：

我的目标是谷歌浏览器。是否可以在画布上绘制透明图像？透明是指以 50% 的不透明度绘制整个图像。

【问题讨论】：

您是否希望画布是透明的，以便您可以将其放置在其他元素之上？
不，这是不可能的。看到这个答案：stackoverflow.com/questions/2359537/…
贾斯汀，不，我想在其他画布元素之上绘制半透明图像。我对使整个画布透明没有兴趣。 Intelekshual，设置 context.globalAlpha 至少在 Chrome 中影响后续的 context.drawImages。

标签： javascript html canvas transparency

【解决方案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 验证。

【讨论】：

globalAlpha 不适用于在 Firefox 30+ 中使用 drawImage 绘制的图像：bugzilla.mozilla.org/show_bug.cgi?id=1028288
@Derek，这个错误只涉及 svg 图片。

【解决方案2】：

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

【讨论】：

@Mr.贝尔：为此向 Chrome +1。
链接已损坏。见dev.w3.org/html5/2dcontext/#dom-context-2d-globalalpha

【解决方案3】：

如果您遍历画布的图像数据并手动设置 alpha 值，然后使用 canvas.toDataURL 方法导出透明图像并将其插入另一个画布，这是可能的。

【讨论】：

如果要在另一个上绘制画布，则不必调用 toDataURL，drawImage 接受画布作为图像源。