我正在用这个将图像插入到我的 Canvas 中:
ctx.drawImage(myImageObject, 0, 0);
它工作得很好，除了我插入的图像的某些部分是透明的，而 Canvas 似乎忽略了这一点，它只是将应该透明的部分打印为白色像素。
这是我要插入的图像:http://i44.tinypic.com/25ymq.gif
我研究了这个问题，有些人通过执行 ctx.getImageData(0, 0, width, height).data 来修复它，然后遍历该数组手动替换像素以获得透明度。我还读到这是不好的做法，因为它很慢(我的 Sprite 表可能是 1000 x 1000，所以这会非常慢)。
是否可以做一些事情来使我的 gif 中的透明度显示出来？当我将它保存在 photoshop 中并查看 gif 本身时，我可以看到透明度，但是一旦我将它粘贴到 Canvas 中，它就不再透明了。
编辑:我刚刚尝试了另一个 gif 并且透明度有效，但在上面的那个中它没有，上面的 gif 可能有问题吗？
最佳答案
在 Mac 上最新的 Firefox 和 Chrome beta 中使用该图像和以下代码对我来说效果很好。 (除了图像本身有一些白色的非透明像素，您可以通过在深色背景上打开看到这些像素，例如在 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>
关于javascript - 透明图像背景html5 Canvas ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9746510/