Javascript 画布-大背景图像上的小图像层，合并为单个画布像素数据

如何将较小的图像合并到画布上较大背景图像的顶部。较小的图像将四处移动。因此，我需要保留原始背景像素数据的引用，以便画布上的每一帧都可以重新绘制，覆盖在新位置

---

BgImage:1280 x 400，overlayImage:320 x 400，overlayOffsetX:mouseX

我认为每次你想改变一些东西时都会绘制整个场景，所以：

context.drawImage(bgImage, 0, 0);
context.drawImage(overlayImage, overlayOffsetX, 0);

---

更新

您可以通过复制背景图像数据手动合成两幅图像的图像数据

或

做一些简单的事情，可能更快。您可以创建新的canvas元素（无需附加到文档），它将以易于管理的形式存储图像数据<如果要将矩形图像放置到画布中，代码>putImageData很好。但如果你想把图像透明，额外的画布将有所帮助。看看下面的例子是否让您满意

// preparation of canvas containing data of overlayImage
var OVERLAY_IMAGE_WIDTH = 320;
var OVERLAY_IMAGE_Height = 400;
var overlayImageCanvas = document.createElement('canvas');
overlayImageCanvas.width = OVERLAY_IMAGE_WIDTH;
overlayImageCanvas.height = OVERLAY_IMAGE_HEIGHT;
overlayImageCanvas.getContext('2d').putImageData(overlayImage, 0, 0);

// drawing scene, execute this block every time overlayOffsetX has changed
context.putImageData(bgImage, 0, 0);
context.drawImage(overlayImageCanvas, overlayOffsetX, 0);

---

我使用getImageData从这两幅图像中获得了两组像素数据。所以我的叠加数据要小得多，我需要把它放在背景数据的某个位置上，可以使用putImageData将整个大型组合图像放在画布上，但我的理解是，首先需要合并这两个数据？这非常有效！而且似乎很快，我不知道你可以这样做似乎很有用。感谢性能优化