html5 - Dibujar PNG a un elemento de lienzo: no muestra transparencia

canvas transparency

Question

Intento usar drawImage para dibujar un PNG semitransparente en un elemento canvas. Sin embargo, dibuja la imagen como completamente opaca. Cuando miro el recurso que se está cargando y cargo el PNG real en el navegador, muestra la transparencia, pero cuando lo dibujo en el lienzo, no lo hace. ¿Algunas ideas?

Aquí está el código:

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

Answer 1

Debería funcionar bien, ¿estás seguro de que tu imagen es realmente transparente y no solo blanca en el fondo?

Aquí hay un ejemplo de dibujar un PNG transparente sobre un rectángulo negro para basar su código en:

http://jsfiddle.net/5P2Ms/

Answer 2

NB, si tuviera que usar canvas.toDataURL y establecer el mimetype en cualquier otra cosa que no sea gif o png , las partes transparentes de la imagen serán completamente negras.

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

Answer 3

No te olvides de agregar un oyente de eventos al evento de carga de la imagen. La carga de imágenes es algo que sucede en segundo plano, por lo que cuando el intérprete de JavaScript llega a la parte lienzo.dibujar, lo más probable es que la imagen no se haya cargado todavía y que sea solo un objeto de imagen vacío, sin contenido.

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 4

Si lo dibuja en un bucle de renderizado, primero debe asegurarse de ejecutar context.clearRect( 0, 0, width, height ) ; de lo contrario, solo está escribiendo el png sobre el png en cada fotograma, que eventualmente será opaco. (Pero los marcos se procesan rápidamente, por lo que no verías esto a simple vista).

Answer 5

Simplemente puede insertar cualquier imagen transparente utilizando el objeto 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>