html - 将 PNG 绘制到 Canvas 元素——不显示透明度

Question

我正在尝试使用 drawImage 在 Canvas 元素上绘制半透明的 PNG。但是，它将图像绘制为完全不透明。当我查看正在加载的资源并在浏览器中加载实际的 PNG 时，它显示透明度，但是当我在 Canvas 上绘制它时，它没有。有什么想法吗？

代码如下:

drawing = new Image() 
drawing.src = "draw.png" 
context.drawImage(drawing,0,0);

Answer 1

不要忘记为图像的加载事件添加一个事件监听器。图像加载是在后台发生的事情，因此当 JavaScript 解释器到达 canvas.drawImage 部分时，很可能图像可能还没有加载，只是一个没有内容的空图像对象。

drawing = new Image();
drawing.src = "draw.png"; // can also be a remote URL e.g. http://
drawing.onload = function() {
   context.drawImage(drawing,0,0);
};