Javascript 如何将onClick事件处理程序添加到画布元素并控制鼠标移动动作？

我在画布中有一个图像，我想单击该图像并拖动该图像，而无需提起鼠标左键和释放鼠标左键位置的图像。现在，当鼠标图标悬停在画布上，图像随之移动时，我尝试添加onclick侦听器事件，但我确信我的新手身份阻碍了我的进度

这是我到目前为止的想法。如何使用现有代码使其工作

var canvas=document.getElementById'customCanvas'； var context=canvas.getContext'2d'； 使之成为基础； 函数make_base { 上传图片=新图片； 上传_image.src=https://lh3.googleusercontent.com/-6Zw-hozuEUg/VRF7LlCjcLI/AAAAAAAAAKQ/A61C3bhuGDs/w126-h126-p/eagle.jpg'; upload_image.onload=函数{ context.drawImageupload_图像，0,0； canvas.addEventListener'click'，canvas.onmousemove=functione{ ///更正鼠标位置，使其相对于画布 var rect=canvas.getBoundingClientRect， constantX=0，constantY=0， x=e.clientX-rect.left， y=e.clientY-rect.top； context.clearRect0，0，canvas.width，canvas.height； context.drawImageupload_图像，x，y； }; } } * { 保证金：0； 填充：0； } html，正文{ 宽度：100%； 身高：100%； } .侧窗格{ 身高：100%； 背景：E8E8EA； } .侧窗格.窗体{ 高度：80px； 利润率：10px0； } .侧窗格.资产{ 宽度：100%； } 资产文本{ 字体大小：24px； } .assets.text、.assets.image{ 利润率：10px0； } .资产.形象{ 宽度：50px； 高度：50px； 右边距：5px； 浮动：左； 溢出：隐藏； } .资产.形象ul li img{ 宽度：100%； 身高：100%； } .canvas.block{ 位置：相对位置； 宽度：600px；高度：600px； 利润率：10px； 边框：1px实心； 盒影：0px 0px 5px黑色； } .项目{ 边框：1px实心透明； 位置：绝对位置； } .item.selected{ 边框颜色：蓝色； } -> 类型 上载 -> 资产 文本 添加文本 图像 ->

---

您正在查找的事件将是-AFAIK如果我错了，请更正我，但是单击事件只有在完整的单击事件同时完成向下和向上时才会触发

这里有一些示例代码

var mouseX;
var mouseY; // Accessible outside the function. Easier access to canvas drawing.

var canvas = ''; // Complete this to get canvas element

canvas.addEventListener("mousedown", function(mouse){
  // Get mouse co-ordinates
})

在此事件侦听器中，您可以检查当前鼠标位置

var canvasElement = element.getBoundingClientRect()
mouseX = mouse.pageX - canvasElement.left;
mouseY = mouse.pageY - canvasElement.top;

将图像绘制到画布时使用这些变量来确定图像的x和y位置。这些应该随着鼠标在画布上的移动而改变。即，将它们传递给make_base函数

make_base(mouseX, mouseY)

更新您的绘图功能以说明它们

 function make_base(mouseX, mouseY)
    {
        upload_image = new Image();
        upload_image.src = 'https://lh3.googleusercontent.com/-6Zw-hozuEUg/VRF7LlCjcLI/AAAAAAAAAKQ/A61C3bhuGDs/w126-h126-p/eagle.jpg';
        upload_image.onload = function(){
            context.drawImage(upload_image, 0, 0);
            canvas.addEventListener('click', canvas.onmousemove = function(e) {
                /// correct mouse position so its relative to canvas
                var rect = canvas.getBoundingClientRect(),
                        constantX = 0, constantY = 0,
                        x = mouseX,
                        y = mouseY

                context.clearRect(0, 0, canvas.width, canvas.height);
                context.drawImage(upload_image, x, y);
            });
        }
    }

---

请注意，上面的代码不完整，例如，X和Y将基于鼠标在页面上的位置，而不是画布。这需要进行单独的计算。

首先，您必须检查鼠标是否在图像上，然后检查是否试图拖动图像。为此，您需要一些事件，mousedown、mouseup和mousemove。要检查鼠标指针是否在图像上，必须获取该图像的X、Y、宽度和高度。下面是最终代码

编辑 还有一些变化。Image类没有X和Y属性，所以我必须定义变量来存储数据，并对isInside函数进行一些更改

var canvas=document.createElement'canvas'； document.body.appendChildcanvas； var context=canvas.getContext'2d'； 画布宽度=300； 帆布高度=300； var-u图像； var-imageX，imageY； var mouseX，mouseY； var-imageDrag=false； 使之成为基础； canvas.addEventListenermousemove，函数evt{ var mousePos=getMousePoscanvas，evt； mouseX=mousePos.x； mouseY=mousePos.y； }; 函数getMousePoscanvas，事件{ var rect=canvas.getBoundingClientRect； 返回{ x:event.clientX-rect.left， y:event.clientY-rect.top }; } 函数isInsideImagerect{ var pos={x:mouseX，y:mouseY}； 返回pos.x>imageX&&pos.ximageY； } 函数make_base { 上传图片=新图片； imageX=0； imageY=0； upload_image.onload=函数{ context.drawImageupload_图像，0,0； } 上传_image.src=https://lh3.googleusercontent.com/-6Zw-hozuEUg/VRF7LlCjcLI/AAAAAAAAAKQ/A61C3bhuGDs/w126-h126-p/eagle.jpg'; } canvas.addEventListenermousedown，函数evt{ ifisInsideImageupload_图像{ imageDrag=t 后悔 } }; canvas.addEventListenermouseup，函数evt{ iImageDrag imageDrag=false； }; 设置间隔函数{ iImageDrag{ context.clearRect0，0，canvas.width，canvas.height； imageX=鼠标； imageY=老鼠； context.drawImageupload_图像、imageX、imageY； }

---

}, 1000/30; 或者，你可以在图片下嵌入一个外部链接，带你去任何你想去的地方

由于您在画布中，因此无法侦听画布的绘图事件。您必须手动检查鼠标按钮是否按下，并通过图像坐标检测您是否点击了图像。我给你介绍了一个很好的例子：更容易使用Fabric现在我的图像在我移动鼠标时消失了。@TheBrokenPaner你说明了页面位置和画布位置了吗？没有，如果你有时间，你能编辑你的答案并给我看吗？如果你不能，也没关系。@the BrokenPaner更新为canvas top，左侧。非常感谢，很遗憾，我无法理解它，但谢谢你的努力。请在你的答案中包含更多细节，并提供示例或可能的工作解决方案