canvas - 在较大的背景图像上叠加小图像，合并为单个画布像素数据

Question

如何在一个画布上的较大背景图像上合并较小的图像。较小的图像会四处移动。因此，我需要保留对原始背景像素数据的引用，以便画布的每一帧都可以重绘，并将叠加层放在新的位置。

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

Answer 1

我认为每次想要改变某些东西时都会画出整个场景，所以：

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