Question

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

ctx.drawImage（myImageObject，0,0）;

它完美无缺，除了我插入的图像中的某些部分是透明的，画布似乎忽略了它，它只是打印出应该透明的白色像素。

以下是我要插入的图片：http://i44.tinypic.com/25ymq.gif

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

是否有可能做一些事情来提高我的gif中的透明度？当我将它保存在photoshop中时，当我看到gif本身时，我可以看到透明度，但是一旦我将它粘在画布上就会停止透明。

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

Answer 1

使用该图片以及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>

透明图像背景html5画布

1 个答案: