Javascript 在HTML5画布中连接4个圆圈模式

目前我有这个代码

这将创建4个圆，然后将其连接到最后一个圆

以下是我需要实现的场景：

左键单击某个区域，则该区域将成为点a

单击其他区域，它将成为点B

点A和点B可以连接

添加连接点A和B的点C

添加将连接到点B和C的点D

这些点可以拖动，但仍保持连接

如何实现线路连接？并使它们能够被拖动

 function drawCircle(cx,cy){
 if(lastX){
 ctx.globalCompositeOperation='destination-over';
 ctx.beginPath();
 ctx.moveTo(lastX,lastY);
 ctx.lineTo(cx,cy);
 ctx.stroke();
 ctx.globalCompositeOperation='source-over';
 }

 ctx.beginPath();
 ctx.arc(cx,cy,radius,0,Math.PI*2);
 ctx.closePath();
 ctx.fill();

 }

function handleMouseDown(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mx=parseInt(e.clientX-offsetX);
  my=parseInt(e.clientY-offsetY);

  if(i<4)
  {
     i++;
     drawCircle(mx,my);
  }
  lastX=mx;
  lastY=my;
}

函数画圈（cx、cy）{
if（lastX）{
ctx.globalCompositeOperation='destination-over'；
ctx.beginPath（）；
ctx.moveTo（lastX，lastY）；
ctx.lineTo（cx，cy）；
ctx.stroke（）；
ctx.globalCompositeOperation='source-over'；
}
ctx.beginPath（）；
ctx.弧（cx，cy，半径，0，数学PI*2）；
ctx.closePath（）；
ctx.fill（）；
}
功能手柄向下（e）{
//告诉浏览器我们正在处理此事件
e、 预防默认值（）；
e、 停止传播（）；
mx=parseInt（e.clientX-offsetX）；
my=parseInt（e.clientY-offsetY）；
如果（i您可以像这样测试鼠标是否在一个圆点内：

var dx=mouseX-circleCenterX;
var dy=mouseY-circleCenterY;
if(dx*dx+dy*dy<circleRadius*circleRadius){
    // the mouse is inside the circle
}


单击以添加点。现有点可拖动。
您可以像这样测试鼠标是否在一个圆点内：

var dx=mouseX-circleCenterX;
var dy=mouseY-circleCenterY;
if(dx*dx+dy*dy<circleRadius*circleRadius){
    // the mouse is inside the circle
}


单击以添加点。现有点可拖动。
nice！但我唯一不懂的是如何连接A到C和B，以调整添加连接器。例如，
connectors.push（{start:0，end:2}）
将用一条线连接锚[0]和锚[2]。因为锚[0]是“A”，锚[2]是“C”，这意味着A和C将被连接。；-）当我添加连接器时，push在某些迭代中没有调用draw函数。正确，在
连接器之后。push
您必须调用draw（）函数，以便将新连接器绘制到画布上。标签和圆仅出现在“D”中，即使draw（）；connectors.push（{start:0，end:2}）；draw（）；connectors.push（{start:1，end:2}）；draw（）；connectors.push（{start:1，end:3}）；draw（）；很好！但我唯一不知道的是如何连接A到C和B以调整添加连接器。例如，
connectors.push（{start:0，end:2}）
将锚[0]和锚[2]用一条线连接起来。因为锚[0]是“A”，锚点[2]是“C”，这意味着A&C将被连接；-）当我添加连接器时。push在某些迭代中没有调用draw函数正确，在连接器之后。push必须调用draw（）函数，以便将新连接器绘制到画布上。即使draw（）；connectors.push（{start:0，end:2}）；draw（）；connectors.push（{start:1，end:2}）；draw（）；connectors.push（{start:1，end:3}）；draw（）；