canvas - superposer une petite image sur une image d'arrière-plan plus large, fusionner avec des données de pixel de toile unique

Question

Comment fusionner une image plus petite sur une image de fond plus grande sur une toile. L'image la plus petite va se déplacer. Donc, je vais devoir garder une référence des données de pixels d'arrière-plan d'origine, de sorte que chaque image de la toile peut être redessinée, avec la superposition dans sa nouvelle position.

bgimage: 1280 x 400, overlayImage: 320 x 400, overlayOffsetX: mouseX

Answer 1

Je pense qu'il est commun de dessiner toute la scène chaque fois que vous voulez changer quelque chose, alors:

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

---

MISE à JOUR

Vous pouvez composer manuellement les données d'image de deux images avec prise copie des données d'image d'arrière-plan

ou

faire quelque chose plus facile, probablement plus rapide. Vous pouvez créer un nouvel élément canvas (sans attachement au document) qui stockera les données d'image dans un format facile à gérer. putImageData est bon si vous voulez placer une image rectangulaire dans la toile. Mais si vous voulez mettre de l'image avec de la transparence, des canevas supplémentaires vous aideront. Voyez si l'exemple ci-dessous vous satisfait.

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