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