将PNG绘制到画布元素 - 不显示透明度

Question

我正在尝试使用drawImage在canvas元素上绘制一个半透明的PNG.但是,它将图像绘制为完全不透明.当我查看正在加载的资源并在浏览器中加载实际的PNG时,它会显示透明度,但是当我在画布上绘制时,它不会.有任何想法吗？

这是代码:

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

Answer 1

不要忘记为图像的load事件添加事件监听器.图像加载是在后台发生的事情,所以当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);
};

Answer 2

您可以使用Image对象简单地插入任何透明图像：

var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');
var image=new Image();
image.onload=function(){
context.drawImage(image,0,0,canvas.width,canvas.height);
};
image.src="http://www.lunapic.com/editor/premade/transparent.gif";

<canvas id="canvas" width="500" height="500">your canvas loads here</canvas>

Answer 3

它应该工作得很好，你确定你的图像真的是透明的，而不仅仅是背景是白色的吗？

下面是在黑色矩形上绘制透明 PNG 的示例，以作为代码的基础：

http://jsfiddle.net/5P2Ms/