web-dev-qa-db-ja.com

キャンバス要素へのPNGの描画-透明度を表示していません

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

コードは次のとおりです。

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

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

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>
5
ANUJ SINGH

注：canvas.toDataURLを使用する場合、gifまたはpng以外のmimetypeを設定すると、画像の透明部分は完全に黒になります。

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

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

3
Stev0

それはうまく機能するはずです、あなたの画像は本当に透明で、背景の白いだけではありませんか？

以下は、黒い長方形の上に透明なPNGを描画して、コードのベースを作成する例です。

http://jsfiddle.net/5P2Ms/

3
Simon Sarris