在画布上绘制带有透明度的图像。

Question

我有一张图片。我使用drawImage()将它绘制在画布上。

我的问题是：如果图像的不透明度为0.4，如何在画布上以相同的不透明度绘制它。

我创建了一个样例Fiddle。如何在保持图片0.4透明度的情况下将#scream绘制到mycanvas上。

HTML：

<p>Image with 0.4 opacity to be used:</p>
<img id="scream" width="200" height="200" src="http://img42.com/NMMU8+">

<p>Canvas:</p>
<canvas id="myCanvas" width="220" height="220" style="border:1px solid #d3d3d3;">
</canvas>

css：

#scream{
    opacity: 0.4;
}
#myCanvas{
    background-color: #f60;
}

js：

window.onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 10, 10);
}

- Becky

---

您可以使用 ctx.globalAlpha 来实现，参见可能的重复问题。 - Spencer Wieczorek

Answer 1

使用 globalAlpha 属性来改变透明度，但在绘制图像之前确保先设置它：

ctx.globalAlpha = 0.4;

- Puni

---

我怎样只添加一个 ctx？ - Narendra Solanki

如果我正确理解了您的评论，您可以在之前使用save()函数，在之后使用restore()函数，以避免后续绘制的所有内容都使用此处设置的相同 alpha 值。 - Ibrahim

午夜的甜母亲啊，我从未想到你可以这样做！使用样式隔离容器和重叠画布容器会节省很多麻烦...下次我应该真的读一下文档XD。 - CCJ