粘贴图像数据时保持透明度

Question

所以我目前正在尝试在图像之间进行切割测试，但我不了解某些行为。

我用getImageData抓取图像部分并尝试将其粘贴到另一个坐标中。但透明度并不一致。 imageData对象数据数组告诉我那些第一个像素没有不透明度，因为alpha通道被设置为0.那么为什么当我粘贴它时我得到那些白色像素？

function checkColisions(c, s, x, y) {
    let canvasSection = c.ctx.getImageData(x, y, s.width, s.height);

    for (let i=0; i<canvasSection.data.length; i+=4) {
        if (canvasSection.data[i+3] == 255 && s.data[i+3] == 255 ) {
            c.ctx.putImageData(s, x, y);
            return false;
        }
    }

    c.ctx.putImageData(s, x, y);

    return true;
}

c是一个带有画布对象的画布类

s是图像imageData对象

x和y是我要粘贴的位置

Answer 1

putImageData将覆盖实际的像素值，而不是添加它们。您可能需要查看drawImage：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

你应该能够直接引用你早期的画布作为带有矩形（sx，sy，sWidth，sHeight）的输入并将其绘制到你的“目标”画布上（dx，dy，dWidth，dHeight）