Drawing PNG to a canvas element — not showing transparency

问题

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?

Here's the code:

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

回答1:

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.

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:

You can simply insert any transparent image using Image object:

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>

回答3:

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:

http://jsfiddle.net/5P2Ms/

回答4:

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.)

回答5:

NB, if you was to use canvas.toDataURL and you set the mimetype to anything other than say gif or png, the transparent parts of the image will be completely black.

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

来源：https://stackoverflow.com/questions/8977369/drawing-png-to-a-canvas-element-not-showing-transparency

标签

html5

canvas

png

transparency

drawimage