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

【问题标题】：HTML5 Canvas Drawing Multiple PNG images with transparencyHTML5 Canvas 绘制多个具有透明度的 PNG 图像
【发布时间】：2014-12-21 20:54:46
【问题描述】：

我有一个 html5 页面，上面有多个具有透明背景的 png 图像。我试图将它们全部绘制在一个画布对象上并保持它们之间的透明度。我一直把它们画在应该在的地方，但背景是黑色的。图片已经加载到页面上，所以这不是 onLoad 问题。在循环浏览图像之前，我在画布上使用 clearRect 方法。这是我正在运行以绘制图像的循环。（获取 left、top、width 和 height 的行都按需要工作。问题在于 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);
            }

【问题讨论】：

澄清一下，您是否获得了不透明的黑色背景，而您希望每张图像都具有透明度？您是否使用 .getImageData 和 .putImageData 来修改图像？

标签： javascript html canvas png transparency

【解决方案1】：

我发现了我的方式的错误。它与我发布的代码无关。创建画布后，我使用 toDataURL 和参数来创建 jpeg 而不是 png。当我更改为 PNG 时，它可以正常工作。

【讨论】：