在画布上剪切和绘制图像，并在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