剪輯和繪製圖像的畫布和鼠標在HTML5畫布下拖動圖像

Question

我可以使用drawImage剪輯圖像並在canvas方法中顯示它，但我不知道如何更改mousemove上特定剪切圖像的位置？

Answer 1

只需將圖像的x和y位置附加到當前的鼠標x和y。

canvas.onmousemove = function(e) { 

    /// correct mouse position so its relative to canvas 
    var rect = canvas.getBoundingClientRect(), 
     x = e.clientX - rect.left, 
     y = e.clientY - rect.top; 

    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.drawImage(img, x, y); 
} 

只需使用剪切替換這裏的簡單形式drawImage()。如果你的意思是你想要在的內部繪製的圖像，剪輯區域使用x和y來代替源x和y（並且還要記住在這種情況下檢查x和y是否在圖像尺寸內 - 也可以使用clip()'在這種情況下爲ed路徑）。

Online demo here