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

【问题标题】：Drawing PNG to a canvas element -- not showing transparency将 PNG 绘制到画布元素 - 不显示透明度
【发布时间】：2012-02-17 03:23:10
【问题描述】：

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

代码如下：

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

【问题讨论】：

请显示一个可重现的测试用例与问题，以及失败的操作系统/浏览器/版本。这通常可以正常工作。
我遇到了同样的问题，我的 html 看起来像这样one。脚本放在哪里重要吗？当您按下提交时，它可以工作，但是当您重新加载页面时，图片不会呈现

标签： html canvas png transparency drawimage

【解决方案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);
};

【讨论】：

【解决方案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";

&lt;canvas id="canvas" width="500" height="500"&gt;your canvas loads here&lt;/canvas&gt;

【讨论】：

与投票最多的那个相同。问题和这 2 个答案之间的区别是 image.onload。

【解决方案3】：

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

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

http://jsfiddle.net/5P2Ms/

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案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";

【讨论】：

变量“base64”在这段代码中实际做了什么？我没有看到它写在其他任何地方。
@vagueexplanation 做四个。