當粘貼圖像數據時保持透明

Question

所以我目前正在嘗試在圖像之間進行一次圖像間的碰撞測試，但我並不理解某些行爲。

我getImageData抓取圖像部分，並嘗試將其粘貼到另一個座標。但透明度並不一致。 imageData對象數據數組告訴我，那些第一個像素沒有不透明性，導致alpha通道設置爲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是畫布類與畫布對象在它

s是圖像的ImageData對象

x和y是其中i要粘貼位置

Answer 1

putImageData將覆蓋實際的像素值，而不是添加到它們。你可能要考慮的drawImage代替：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

您應該能夠直接引用你剛纔的畫布作爲輸入，用矩形（SX，SY，sWidth，sHeight），並繪製到你的「目的地」畫布（DX， dy，dWidth，dHeight）