透明图像背景html5画布

transparent image background html5 canvas

本文关键字：html5 画布 背景 图像 透明图 透明      更新时间：2023-09-26

我正在将一个图像插入到我的画布中，其中包含：

ctx.drawImage（myImageObject，0，0）；

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

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

我对这个问题进行了一些研究，有些人通过ctx.getImageData（0，0，width，height）.data来解决这个问题，然后在该数组中迭代，手动替换像素以获得透明度。我还读到这是一种糟糕的做法，因为它很慢（我的精灵表可能是1000 x 1000，所以这会很慢）。

有可能做点什么让我的gif中的透明度显示出来吗？当我把它保存在photoshop中时，当我看gif本身时，我可以看到它的透明度，但一旦我把它粘在画布上，它就不再透明了。

edit：我刚刚尝试了另一张gif，透明度很好，但在上面的那张中没有，上面的gif可能有问题吗？

在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>
相关文章：