出现上述问题的原因是需要在两个圆之间画一条弧线。在canvas中绘制圆弧有两种方法，arcTo()和arc()。arcTo是两条切线之间的弧，不适用。Arc画圆或者圆弧，比较一致，但是需要设置起点圆弧、终点圆弧、半径、圆心坐标。给定两个圆的圆心坐标和半径，需要计算起始圆弧、结束圆弧、圆弧半径和圆弧圆心坐标。计算圆弧的半径和圆心。//起点和终点半径const{x:startX,y:startY}=startconst{x:endX,y:endY}=endconstradius=20//连接两个圆坐标的直线长度centersconstdistance=Math.sqrt(Math.pow(endX-startX,2)+Math.pow(endY-startY,2))//圆弧对应的圆弧//保证圆弧的圆弧不是太大，默认角度对应圆弧60°//即圆心与两圆心连成一个等边三角形，半径等于圆心坐标之间的距离两圆心constarcAngle=Math.PI/3//两圆心坐标与x轴的夹角对应弧度constposLineAngle=Math.atan2(endY-startY,endX-startX)//ArcLineAngle对应圆弧圆心与起点坐标与X轴的夹角constarcLineAngle=arcAngle-posLineAngle//ArcLineAngle中心坐标constcircle={x:startX+distance*Math.cos(arcLineAngle),y:startY-distance*Math.sin(arcLineAngle)}计算起点弧和终点弧const{x,y}=circle//arc起点和终点节点处直线的多余圆弧conststartOffset=Math.asin(radius/(2*distance))*2constendOffset=Math.asin(radius/(2*distance))*2//arc起始弧和结束弧conststartAngle=arcLineAngle+Math.PI+startOffsetconstendAngle=arcLineAngle+Math.PI*4/3-endOffset绘制弧//上面的弧是逆时针计算的，js画圆是顺时针画canvas.arc(x,y,distance,-endAngle,-startAngle)在圆弧的末端绘制箭头为了美观，在圆弧的末端添加指示箭头constax=x+distance*Math.cos(endAngle)constay=y-distance*Math.sin(endAngle)constangle=Math.PI/2-endAngleconstarrowSize=12//箭头的边长，控制箭头的大小constbx=ax+Math.sin(angle+Math.PI/3)*arrowSizeconstby=ay-Math.cos(angle+Math.PI/3)*arrowSizeconstcx=ax+Math.sin(angle+Math.PI-数学.PI/3)*arrowSizeconstcy=ay-Math.cos(angle+Math.PI-Math.PI/3)*arrowSizecanvas.stroke()canvas.beginPath()canvas.moveTo(ax,ay)画布。lineTo(bx,by)canvas.lineTo(cx,cy)canvas.closePath()canvas.fill()至此基本满足需求
