Html 将 PNG 绘制到画布元素 - 不显示透明度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8977369/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drawing PNG to a canvas element -- not showing transparency
提问by pixielex
I'm trying to use drawImage to draw a semi-transparent PNG on a canvas element. However, it draws the image as completely opaque. When I look at the resource that's being loaded and load the actual PNG in the browser, it shows the transparency, but when I draw it on the canvas, it does not. Any ideas?
我正在尝试使用 drawImage 在画布元素上绘制半透明的 PNG。但是，它将图像绘制为完全不透明。当我查看正在加载的资源并在浏览器中加载实际的 PNG 时，它显示了透明度，但是当我在画布上绘制它时，它没有。有任何想法吗？
Here's the code:
这是代码：
drawing = new Image()
drawing.src = "draw.png"
context.drawImage(drawing,0,0);
回答by Menno Bieringa
Don't forget to add an event listener to the image's load event. Image loading is something that happens in the background, so when the JavaScript interpreter gets to the canvas.drawImage part it is most likely the image probably will not have loaded yet and is just an empty image object, without content.
不要忘记为图像的加载事件添加一个事件侦听器。图像加载是在后台发生的，所以当 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);
};
回答by ANUJ SINGH
You can simply insert any transparent image using Imageobject:
您可以简单地使用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>回答by Simon Sarris
It ought to work fine, are you sure your image is really transparent and not just white in the background?
它应该可以正常工作，您确定您的图像真的是透明的，而不仅仅是背景中的白色吗？
Here's an example of drawing a transparent PNG over a black rectangle to base your code off of:
下面是在黑色矩形上绘制透明 PNG 以作为代码基础的示例：
回答by Stev0
If you are drawing it in a render loop, you need to make sure to run context.clearRect( 0, 0, width, height )first, otherwise you are just writing the png over the png every frame, which will eventually be opaque. (But frames render fast, so you wouldn't see this with the naked eye.)
如果你在渲染循环中绘制它，你需要确保首先运行context.clearRect( 0, 0, width, height )，否则你只是在每一帧的 png 上写 png，最终将是不透明的。（但帧渲染速度很快，因此您无法用肉眼看到这一点。）
回答by Luke Madhanga
NB, if you was to use canvas.toDataURLand you set the mimetype to anything other than say gifor png, the transparent parts of the image will be completely black.
注意，如果您要使用canvas.toDataURL并且将 mimetype 设置为 saygif或以外的任何内容png，则图像的透明部分将是完全黑色的。
drawing = new Image();
drawing.onload = function () {
context.drawImage(drawing,0,0);
var base64 = canvas.toDataURL('image/png', 1);
};
drawing.src = "draw.png";
