Javascript 什么'；addEventListeners有什么问题吗

向量应该能够被拉动和重新定位。啊！。我把它放在小提琴上

var canvas=document.getElementById（'cv2'），
c=canvas.getContext（'2d'）；
var-wide=canvas.width；
var high=画布高度；
变量p0={
x:50，
y:250
};
变量p1={
x:250，
y:270
};
变量p2={
x:250，
y:150
};
draw（）；
函数绘图（）{
c、 clearRect（0，0，canvas.width，canvas.height）；
提取点（p0）；
支点（p1）；
支点（p2）；
抽绳（）；
}
功能提取点（p）{
c、 beginPath（）；
c、 线宽=2；
c、 弧（p.x，p.y，10,0,2*Math.PI，假）；
c、 笔划（）；
c、 填充（）；
}
函数drawLines（）{
c、 beginPath（）；
c、 线宽=2；
c、 移动到（p1.x，p1.y）；
c、 lineTo（p0.x，p0.y）；
c、 lineTo（p2.x，p2.y）；
c、 笔划（）；
}
canvas.addEventListener（'mousedown'，onMouseDown）；
变量拖动点；
函数findDragPoint（x，y）{
if（hitTest（p0，x，y））返回p0；
if（hitTest（p1，x，y））返回p1；
if（hitTest（p2，x，y））返回p2；
返回null；
}
函数onMouseDown（事件）{
dragPoint=findDragPoint（event.clientX，event.clientY）；
如果（拖动点）{
dragPoint.x=event.clientX；
dragPoint.y=event.clientY；
draw（）；
addEventListener（“mousemove”，onMouseMove）；
addEventListener（“mouseup”，onMouseUp）；
}
}
mouseMove函数（事件）{
dragPoint.x=event.clientX；
dragPoint.y=event.cleintY；
draw（）；
}
函数onMouseUp（）{
removeEventListener（“mousemove”，onMouseMove）；
canvas.removeEventListener（“mouseup”，onMouseUp）；
}
功能测试（p，x，y）{
var dx=p.x-x，
dy=p.y-y；
return Math.sqrt（dx*dx+dy*dy）JavaScript没有什么乱七八糟的地方，你只需要更多的练习

代码中的一些内容，正如他们在注释中指出的那样，您有一个打字错误
cleintY
，您还必须减去canvas.offset以获得鼠标的正确位置

这些点应该是一个数组，这样你可以添加更多，一切都会正常工作

这是你的代码


var canvas=document.getElementById（'cv2'）；
canvas.addEventListener（'mousedown'，onMouseDown）；
var c=canvas.getContext（'2d'）；
变量点=[{x:18，y:12}，{x:50，y:50}，{x:180，y:90}，{x:250，y:50}]；
var dragPoint=null；
draw（）；
函数绘图（）{
c、 clearRect（0，0，canvas.width，canvas.height）；
积分。forEach（p=>drawPoint（p））；
抽绳（）；
}
功能提取点（p）{
c、 beginPath（）；
c、 线宽=2；
c、 弧（p.x，p.y，10,0,2*Math.PI，假）；
c、 笔划（）；
c、 填充（）；
}
函数drawLines（）{
c、 beginPath（）；
c、 线宽=2；
forEach（p=>c.lineTo（p.x，p.y））；
c、 笔划（）；
}
函数findDragPoint（x，y）{
对于（i=0；ireturn Math.sqrt（dx*dx+dy*dy）最简单的修复方法是将事件的
clientX
/
clientY
分别替换为
offetX
和
offsetY
。这些属性为您提供画布上的实际鼠标光标位置，与画布和画布边距的滚动位置无关

另见


var canvas=document.getElementById（'cv2'），
c=canvas.getContext（'2d'）；
var-wide=canvas.width；
var high=画布高度；
变量p0={
x:50，
y:250
};
变量p1={
x:250，
y:270
};
变量p2={
x:250，
y:150
};
draw（）；
函数绘图（）{
c、 clearRect（0,0，canvas.width，canvas.height）；
提取点（p0）；
支点（p1）；
支点（p2）；
抽绳（）；
}
功能提取点（p）{
c、 beginPath（）；
c、 线宽=2；
c、 弧（p.x，p.y，10,0,2*Math.PI，假）；
c、 笔划（）；
c、 填充（）；
}
函数drawLines（）{
c、 beginPath（）；
c、 线宽=2；
c、 移动到（p1.x，p1.y）；
c、 lineTo（p0.x，p0.y）；
c、 lineTo（p2.x，p2.y）；
c、 笔划（）；
}
canvas.addEventListener（'mousedown'，onMouseDown）；
变量拖动点；
函数findDragPoint（x，y）{
if（hitTest（p0，x，y））返回p0；
if（hitTest（p1，x，y））返回p1；
if（hitTest（p2，x，y））返回p2；
返回null；
}
函数onMouseDown（事件）{
dragPoint=findDragPoint（event.offsetX，event.offsetY）；
如果（拖动点）{
dragPoint.x=event.offsetX；
dragPoint.y=event.offsetY；
draw（）；
addEventListener（“mousemove”，onMouseMove）；
addEventListener（“mouseup”，onMouseUp）；
}
}
mouseMove函数（事件）{
dragPoint.x=event.offsetX；
dragPoint.y=event.offsetY；
draw（）；
}
函数onMouseUp（）{
removeEventListener（“mousemove”，onMouseMove）；
canvas.removeEventListener（“mouseup”，onMouseUp）；
}
功能测试（p，x，y）{
var dx=p.x-x，
dy=p.y-y；
return Math.sqrt（dx*dx+dy*dy）请阅读以下内容是否回答了您的问题？onMouseMove中有一个拼写错误：
cleintY
。如果您修复了该错误（单击圆圈顶部区域时）除非画布是滚动的。要解决滚动问题，请参阅重复问题谢谢@NineBerry。这是一步向前，两步向后。谢谢。我同意这种做法。非常感谢。当我相信我理解时，砰。