HTML5 Canvas绘制具有透明度的多个PNG图像

Question

我有一个html5页面，上面有多个png图像，它们具有透明背景。我试图在一个画布对象上绘制它们并保持它们之间的透明度。我一直把它们画在应有的地方，但背景为黑色。图像已加载到页面上，因此它不是onLoad问题。在循环浏览图像之前，我在画布上使用clearRect方法。这是我正在运行的循环来绘制图像。 （获得左边，顶部，宽度和高度的线都可以正常工作。问题在于drawImage线。）图像是页面上img元素的集合，图像可见。

            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);
            }

Answer 1

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