Javascript 使画布图像可移动（可拖动）

我有一个画布区域，我正在向其中添加一些图像，我希望使我的画布图像可以拖动。我通过addEventListener创建了鼠标事件来处理鼠标点击。
但我的问题是，我能够使所有画布上下文都可拖动，而不仅仅是图像。

html代码：

<canvas></canvas>

是否可以使第一个图像（gkhead）仅在画布区域内可抓取，而第二个（球）图像仅在第一个（gkhead）图像区域内可移动？

---

谢谢大家的建议。

为了提高效率，您可以设置两个相同大小的独立画布层。一个是在其上绘制所有画布对象的画布，另一个是空白的临时画布，您将在其中执行对象的实际移动

您还需要将图像存储在某种容器中，比如JSON-y对象。所以你会有一些参考，比如x坐标和y坐标，图像源，图像的宽度，图像的高度，可能还有图像的z索引。您将创建某种命中检测，检查所有图像，如果用户单击图像，则从主画布中删除该图像。在临时画布上完全相同的位置绘制图像。在临时画布上执行所有拖动操作（以节省绘制时间和所需的处理）。然后，在拖放时，擦除临时画布并再次在主画布上绘制它

---

这是我很久以前做的一个例子（，对不起）。现在尝试查找一些有关它的在线教程。

“一个是在上面绘制所有画布对象的，另一个是空白的临时画布，您将在其中执行对象的实际移动”-这可以实现什么样的效率。。？据我所知，这会增加在不同画布上创建和绘制对象的开销。如果画布上有很多对象，那么它可能会变得更有效。因此，与每次刷新都重新绘制100个对象不同，它只会重新绘制主画布一次，以删除正在移动的对象，然后在移动过程中重新绘制临时画布，从而节省在移动过程中重新绘制其他100个对象的时间。

var canvas = document.getElementsByTagName('canvas')[0];
var gkhead = new Image;
var ball   = new Image;
ctx.drawImage(gkhead,0,0,1000, 200);
ctx.drawImage(ball,0,0,100,100);

canvas.addEventListener('mousedown',function(evt){
        document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none';
        lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
        lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
        dragStart = ctx.transformedPoint(lastX,lastY);
        dragged = false;
    },false);

canvas.addEventListener('mousemove',function(evt){
        lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
        lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
        dragged = true;
        if (dragStart){
            var pt = ctx.transformedPoint(lastX,lastY);
            ctx.translate(pt.x-dragStart.x,pt.y-dragStart.y);
            redraw();
        }
    },false);

canvas.addEventListener('mouseup',function(evt){
        dragStart = null;
        if (!dragged) zoom(evt.shiftKey ? -1 : 1 );
    },false);