キャンバス要素にPNGを描画する - 透明度を表示しない

Question

drawImageを使用してキャンバス要素に半透明のPNGを描画しようとしています。ただし、イメージを完全に不透明なものとして描画します。読み込まれているリソースを見て、実際のP​​NGをブラウザに読み込むと、透明度が示されますが、キャンバスに描画すると、透明ではありません。何か案は？ここで

コードです：

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

Answer 1

それが正常に動作するはず、あなたのイメージが背景にちょうど白い本当に透明ではなく、あなたが確かにありますか？

は、ここでのオフにあなたのコードをベースに黒の四角形の上に透明のPNGを描画する例を示します

http://jsfiddle.net/5P2Ms/

Answer 2

あなたはレンダリングループでそれを描画している場合は、あなたが実行することを確認する必要がありcontext.clearRect(0, 0, width, height)最初に、そうでなければ、pngをすべてのフレームのpngの上に書き込んでいます。これは最終的には不透明になります。 （フレームは速くレンダリングされるので、肉眼では見えません）。

Answer 3

イメージのロードイベントにイベントリスナーを追加することを忘れないでください。イメージの読み込みはバックグラウンドで行われるものなので、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); 
}; 

Answer 4

NBあなたはcanvas.toDataURLを使用していたとあなたが言うgifまたはpng以外にMIMEタイプを設定した場合、画像の透明部分は真っ黒になります。

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

Answer 5

あなたは、単に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>