剪辑和绘制图像的画布和鼠标在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