Javascript 在画布上剪辑和绘制图像，并在html5画布上用鼠标向下拖动图像

我可以使用drawImage剪裁图像并在canvas方法中显示，但我不知道如何更改特定剪裁图像在mousemove上的位置

只需将图像的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（）

”编辑路径）