如何使用html5画布元素绘制透明图像
Posted
技术标签:
【中文标题】如何使用html5画布元素绘制透明图像【英文标题】：How to draw transparent image with html5 canvas element 【发布时间】：2011-02-24 09:46:32 【问题描述】：我的目标是谷歌浏览器。是否可以在画布上绘制透明图像？透明是指以 50% 的不透明度绘制整个图像。
【问题讨论】：
您是否希望画布是透明的，以便您可以将其放置在其他元素之上？ 不，这是不可能的。看到这个答案：***.com/questions/2359537/… 贾斯汀，不，我想在其他画布元素之上绘制半透明图像。我对使整个画布透明没有兴趣。 Intelekshual，设置 context.globalAlpha 至少在 Chrome 中影响后续的 context.drawImages。 【参考方案1】：您可以使用 globalAlpha 属性执行此操作，如下所示：
<!DOCTYPE html>
<html>
<body>
<canvas 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 接受画布作为图像源。以上是关于如何使用html5画布元素绘制透明图像的主要内容，如果未能解决你的问题，请参考以下文章