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

Question

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

这是代码：

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);
};

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/

Answer 4

注意，如果您要使用canvas.toDataURL并将 mimetype 设置为 say gifor以外的任何内容png，则图像的透明部分将完全是黑色的。

drawing = new Image();
drawing.onload = function () {
    context.drawImage(drawing,0,0);
    var base64 = canvas.toDataURL('image/png', 1);
};
drawing.src = "draw.png";

Answer 5

如果您在渲染循环中绘制它，您需要确保首先运行context.clearRect( 0, 0, width, height )，否则您只是在每一帧的 png 上写入 png，最终将是不透明的。（但帧渲染速度很快，所以你不会用肉眼看到这一点。）