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

Question

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

我用 getImageData 抓取图像部分并尝试将其粘贴到另一个坐标中。但透明度并不一致。 imageData 对象数据数组告诉我，那些第一个像素没有不透明度，因为 alpha channel 设置为 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是一个canvas类，里面有一个canvas对象

s 是图像 imageData 对象

x和y是我要粘贴的位置

Answer 1

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

您应该能够直接引用您之前的 Canvas 作为矩形(sx、sy、sWidth、sHeight)的输入，并将其绘制到您的“目标” Canvas (dx、dy、dWidth、dHeight)