透明图片背景html5画布

Question

我将图像插入到我的画布中：

ctx.drawImage(myImageObject, 0, 0);

它工作得很好，除了我插入的图像的某些部分是透明的，而画布似乎忽略了这一点，它只是将应该透明的内容打印为白色像素。

这是我插入的图像：http : //i44.tinypic.com/25ymq.gif

我研究了这个问题，有些人通过执行 ctx.getImageData(0, 0, width, height).data 然后迭代该数组来修复它，手动替换像素以获得透明度。我还读到这是不好的做法，因为它很慢（我的精灵表可能是 1000 x 1000，所以这会很慢）。

是否可以做一些事情来使我的 gif 中的透明度显示出来？当我将它保存在 Photoshop 中并查看 gif 本身时，我可以看到透明度，但是一旦我将它粘贴到画布中，它就不再透明了。

编辑：我刚刚尝试了另一个 gif 并且透明度有效，但是在上面的那个中却没有，上面的 gif 可能有问题吗？

Answer 1

对于我来说，在 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>