HTML5画布绘制多个透明PNG图像

我有一个html5页面上有多个PNG图像，它有透明背景。我试图在一个画布对象上绘制它们，并保持它们之间的透明度。我一直让他们画在他们应该在的地方，但有一个黑色的背景。图像已经加载到页面上，因此它不是onLoad问题。在循环显示图像之前，我在画布上使用了clearRect方法。这里是我运行绘制图像的循环。（左边，上边，宽边和高边的线条都是按照需要工作的，问题在于drawImage线。）图像是页面上img元素的集合，图像可见。HTML5画布绘制多个透明PNG图像

  for (i = 0; i < Images.length; i++) { 
       imgTop = parseInt(Images[i].style.top) - Top; 
       imgLeft = parseInt(Images[i].style.left) - Left; 
       imgWidth = parseInt(Images[i].style.width); 
       imgHeight = parseInt(Images[i].style.height); 
       ctx.drawImage(Images[i], imgLeft, imgTop, imgWidth, imgHeight); 
      }

来源

2014-10-26 OctagonCoder

为了澄清，你是否会得到一个不透明的黑色背景，你希望每个图像都有透明度？你是否使用.getImageData＆.putImageData来修改图像？ – markE 2014-10-26 17:42:28

我发现我的方式错误。它与我发布的代码无关。当我完成画布的创建时，我使用带参数的toDataURL来创建一个jpeg而不是一个png。当我更改为PNG时，它按照要求工作。

来源

2014-10-26 21:49:39 OctagonCoder

HTML5画布绘制多个透明PNG图像

回答

相关问题