Javascript 使用鼠标拖动在HTML画布内移动图像

我有一个图像需要在画布内调整大小、移动和旋转，而不是另一个图像，我使用

globalCompositeOperation=“source in”作为遮罩剪裁另一个图像

这里有一个

我正在考虑添加按钮来移动图像，但为什么不添加鼠标呢？但是，我找不到一种方法如何在这段代码中集成拖动函数。我需要在此处更改或添加什么？
原始-移动外部图像

请参见此

代码：

$(window).mousemove(function(event) {
  $("#stcanvas").css({"left" : event.pageX, "top" : event.pageY});
});

css:

显然，您需要添加一个按钮来启用移动。或者，您可能希望使用jquery UI进行内置拖放

更新-移动剪辑

请参见

如果您的意思是希望移动剪辑而不是图像，请执行以下操作：

$(window).mousemove(function(event) {
    var cWidth = $("#stcanvas").width();    
    moveXAmount = (event.pageX / $(window).width())*cWidth;    
    moveXAmount = moveXAmount - (cWidth/2);
    var cHeight = $("#stcanvas").height(); 
    moveYAmount = (event.pageY / $(window).height())*cHeight;    
    moveYAmount = moveYAmount - (cHeight/2);
    buildcanvas();
});

在
make_pic
中执行以下操作：

ctx.drawImage(mask_image, moveXAmount, moveYAmount);

更新2-移动剪辑和内部图像

请参见

如果要移动图像和剪辑，那么基本上只需将moveXAmount和moveYAmount添加到drawImage。希望我现在已经用尽了一切可能；）

根据评论更新3个移动图像而不是遮罩

请参见

主要变化是：

$("#stcanvas").mousedown(function(){
    isDragging = true;
});

$(window).mouseup(function(){
    isDragging = false;
});

我已经更新以显示移动剪辑区域。另一个更新以显示剪辑和图像。我想我现在完成了，除非我错过了什么：）谢谢，第二把小提琴或多或少是我需要的，除了图像（鹰）应该是移动的，而不是面具，它应该在单击鼠标和拖动时工作。不过还是要谢谢你，我会尝试用你的例子，然后自己做剩下的。请看这里：。我也会更新我的答案。多亏了你，我已经按我的需要完成了@用户1977790-非常好。我建议的唯一更改是
$（“#stcanvas”）.mouseup（
应该是
$（窗口）.mouseup
否则，如果在鼠标悬停时将鼠标移出图像，则下次浏览图像时，图像将继续拖动，即使鼠标向上。希望这是有意义的。我的最终更新显示了这一点。当我们单击图片进行拖动时，图像将处于初始位置，并且当我们拖动图像时，图像不会移动随着鼠标的移动，出现了某种程度的延迟。我试图扭转这一局面，但我不太擅长数学，无法得出正确的公式。你知道如何解决这个问题吗？听起来你想跟踪鼠标移动中的增量，可能最好在一个单独的问题中处理。如果你创建一个新问题，并将在这里的评论中，我将看一看。这里是：
ctx.drawImage(pic_image, -400 / 2+moveXAmount, -550 / 2+moveYAmount, im_width, im_height);

$("#stcanvas").mousedown(function(){
    isDragging = true;
});

$(window).mouseup(function(){
    isDragging = false;
});