Question

我正在尝试使用drawImage在canvas元素上绘制半透明的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对象插入任何透明图像：

＆＃13;

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";

＆＃13;

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

＆＃13;

Answer 3

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

这是一个在黑色矩形上绘制透明PNG的示例，以使您的代码基于：

http://jsfiddle.net/5P2Ms/

Answer 4

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

Answer 5

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

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

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

5 个答案: