透明画像の背景HTML5のキャンバス

私はこれで私のキャンバスに画像を挿入しています：透明画像の背景HTML5のキャンバス

ctx.drawImage（myImageObject、0、0）;

イメージを挿入する部分が透明でキャンバスがこれを無視しているように見えるだけで、透明になるべき部分が白いピクセルとして印刷されます。

ここで私が挿入していた画像です：http://i44.tinypic.com/25ymq.gif

を私はこの問題のABITを研究し、何人かの人々がctx.getImageData（0、0、幅、高さ）.dataのをやった後、交換その配列を反復処理することにより、それを固定で手動で透明にする私はまた、これが悪い習慣であることを読んだ。なぜなら、その遅い（と私のスプライトシートは1000 x 1000になる可能性があるので、これは非常に遅くなるだろうから）。

私のGIFショーの透明性を高めるために何かできますか？私はそれをPhotoshopに保存したときにgif自体を見ると透明性が見えますが、キャンバスに貼り付けると透明になりません。

編集：私は別のgifを試してみましたが、透明度は上がっていますが、上のものでは上記のgifに問題がありますか？

出典

2012-03-17 Macmee

を両方...多分それを開いてみて、もう一度それを保存し直しますsourceと実際のファイルを比較します。あなたはpngを考慮しましたか、それともファイルサイズが重いのですか？ –

Mac上の最新のFirefoxとChromeベータ版では、その画像と次のコードでうまく動作します。（画像自体はあなたがFirefoxで暗い背景などに開くことで見ることができますいくつかの白の非透明ピクセルを、持っている場合を除き。）

<!DOCTYPE HTML> 
<html> 
<head> 
<script type="application/x-javascript"> 
var canvas, ctx; 

function init() { 
    canvas = document.getElementById("canvas"); 
    ctx = canvas.getContext("2d"); 

    var size=500; 
    ctx.fillStyle = 'yellow'; 
    ctx.beginPath(); 
    ctx.fillStyle = 'yellow'; 
    ctx.moveTo(0,0); 
    ctx.lineTo(size,0); 
    ctx.lineTo(size,size); 
    ctx.lineTo(0,size); 
    ctx.lineTo(0,0); 
    ctx.stroke(); 
    ctx.fill(); 

    var img = document.getElementById("img"); 
    ctx.drawImage(img, 0, 0); 
} 
</script> 


</head> 


<body onload="init();"> 

    <canvas id="canvas" width="500" height="500"></canvas> 

    <img id="img" src="test.gif" style="position:absolute; top:500px"></img> 

</body> 
</html>

出典

2012-03-18 00:35:22 Nickolay

完璧に動作します、ありがとう！ – Macmee

@ user309641：excellent。あなたのケースで何が問題だったのか分かりましたか？ここでそれを共有できますか？ – Nickolay

透明画像の背景HTML5のキャンバス

答えて

関連する問題