Rysowanie PNG do elementu canvas - niewidoczne przezroczystość

Question

Próbuję użyć drawImage, aby narysować półprzezroczysty PNG na elemencie canvas. Jednak rysuje obraz jako całkowicie nieprzezroczysty. Kiedy patrzę na ładowany zasobnik i ładuję aktualny PNG w przeglądarce, pokazuje on przezroczystość, ale kiedy rysuję go na płótnie, nie jest. Jakieś pomysły?

Oto kod:

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

Answer 1

To powinno działać dobrze, jesteś pewien obraz jest bardzo przejrzysty, a nie tylko biały w tle?

Oto przykład z rysunku przejrzystego PNG na czarnym prostokącie oprzeć swój kod off:

http://jsfiddle.net/5P2Ms/

Answer 2

Jeśli rysunek go w pętli uczynić, trzeba się upewnić, aby uruchomić context.clearRect(0, 0, width, height) po pierwsze, w przeciwnym razie po prostu png png nad png każdej klatki, która ostatecznie będzie nieprzezroczysta. (Ale ramki renderują się szybko, więc nie widać tego gołym okiem.)

Answer 3

Nie zapomnij dodać detektora zdarzeń do zdarzenia ładowania obrazu. Ładowanie obrazu jest czymś, co dzieje się w tle, więc kiedy interpreter JavaScript dostanie się do części canvas.drawImage, najprawdopodobniej obraz prawdopodobnie jeszcze się nie załaduje i jest po prostu pustym obiektem obrazu, bez zawartości.

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

NB, jeśli było wykorzystanie canvas.toDataURL i ustawić typ MIME do niczego innego niż powiedzieć gif lub png, przezroczyste fragmenty obrazu będą całkowicie czarne.

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

Answer 5

można po prostu wstawić dowolny przezroczysty obraz używając Image obiektu:

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>