透明圖像背景HTML5畫布

我正在插入圖像到我的畫布上：透明圖像背景HTML5畫布

ctx.drawImage（myImageObject，0，0）;

它工作完美，除了我插入的圖像的一些部分是透明的，畫布似乎忽略了這一點，它只是打印什麼應該是透明的白色像素。

這裏是我插入圖像：http://i44.tinypic.com/25ymq.gif

我研究這個問題升技有些人通過做ctx.getImageData（0，0，寬度，高度）。數據，然後通過該數組代替迭代固定它像素手動透明。我還讀到，這是不好的做法，因爲它的速度很慢（我的精靈表可能是1000 x 1000，所以這會很慢）。

是否可以做一些事情使我的gif中的透明度顯示出來？當我將它保存在photoshop中，當我查看gif本身時，我可以看到透明度，但只要我將它粘貼在畫布上，它就會停止透明。

編輯：我只是嘗試另一個GIF和透明度的工作，但在一個上面沒有的話，可能有可能與上述GIF問題？

來源

2012-03-17 Macmee

也許嘗試打開它，並重新再次..既節省出來來源，然後是實際的文件。你有沒有考慮過PNG還是那個重量級的文件？ – 2012-03-17 01:42:09

對於我而言，該圖片以及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 2012-03-25 21:43:13

@ user309641：優秀。你知道你的情況有什麼問題嗎？你能在這裏分享嗎？ – Nickolay 2012-03-25 22:09:39

透明圖像背景HTML5畫布

回答

相關問題