Javascript 使用鼠标向下拖动画布上的圆

现在，我有两个圆圈，中间有一条线。我希望能够拖动其中一个圆，线仍然连接，并且在移动圆时它将保持与圆的连接。 节点1和节点2是圆的尺寸。线/肌肉连接到节点1和节点2的x和y位置

函数绘图（）{
//在容器中抽取
c、 fillStyle=“#000000”；
c、 fillRect（container.y、container.x、container.width、container.height）；
//绘制第一个节点
c、 弧（node1.x，node1.y，node1.r，0，2*Math.PI）；
c、 fillStyle=node1.color；
c、 填充（）；
//绘制第二个节点
c、 弧（node2.x，node2.y，node2.r，0，2*Math.PI）；
c、 strokeStyle=node2.color；
c、 fillStyle=node2.color；
c、 填充（）；
//抽筋
c、 beginPath（）；
c、 移动到（muscle.node1x，muscle.node1y）；
c、 lineTo（muscle.node2x，muscle.node2y）；
c、 strokeStyle=肌肉颜色；
c、 线宽=肌肉宽度；
c、 笔划（）；
}

到目前为止，该项目看起来如何

---

以下代码基于您的

draw

函数并实现了拖动功能

功能图（容器、c、节点1、节点2、肌肉）{
//在容器中抽取
c、 fillStyle=“#000000”；
c、 fillRect（container.y、container.x、container.width、container.height）；
//绘制第一个节点
c、 弧（node1.x，node1.y，node1.r，0，2*Math.PI）；
c、 fillStyle=node1.color；
c、 closePath（）；
c、 填充（）；
//绘制第二个节点
c、 弧（node2.x，node2.y，node2.r，0，2*Math.PI）；
c、 strokeStyle=node2.color；
c、 fillStyle=node2.color；
c、 closePath（）；
c、 填充（）；
//抽筋
c、 beginPath（）；
c、 移动到（muscle.node1x，muscle.node1y）；
c、 lineTo（muscle.node2x，muscle.node2y）；
c、 strokeStyle=肌肉颜色；
c、 线宽=肌肉宽度；
c、 closePath（）；
c、 笔划（）；
}
功能节点（x、y、r、颜色）{
这个.x=x；
这个。y=y；
这个.r=r | | 20；
this.color=color | |“#ff0”；
}
功能肌肉（节点1、节点2、宽度、颜色）{
this.node1=node1；
this.node2=node2；
此宽度=宽度| | 5；
this.color=color | |“#f00”；
对象。定义属性（此{
节点1x：{
“get”：（）=>this.node1.x，
“set”：x=>{this.node1.x=x}
},
第1点：{
“get”：（）=>this.node1.y，
“set”：y=>{this.node1.y=y}
},
节点2x：{
“get”：（）=>this.node2.x，
“set”：x=>{this.node2.x=x}
},
节点2y：{
“get”：（）=>this.node2.y，
“set”：y=>{this.node2.y=y}
}
})
}
函数handleMouseDrag（画布、节点）{
var isDrag=假；
变量偏移量={x:0，y:0，x0:0，y0:0}；
var dragNode=未定义；
canvas.addEventListener（“鼠标向下”，函数（e）{
变量x=e.offsetX，y=e.offsetY；
for（节点中的变量i）{
if（Math.pow（x-nodes[i].x，2）+Math.pow（y-nodes[i].y，2）
堆栈溢出应用于回答您遇到的问题或有关需要澄清的实现的特定问题。没有为您编写代码。请提供您尝试过的代码。