如何在html画布元素中画两个圆之间的线

我是HTML画布的初学者，我正在尝试创建一个设计，我可以在两个圆圈之间创建一条水平线这里是我想要的画布，直到现在我还不知道如何用一条线连接这两个圆圈

//绘制画布的脚本
var canvas1=document.getElementById（“c1”）；
var canvasobj=canvas1.getContext（“2d”）；
canvasobj.lineWidth=10；
canvasobj.beginPath（）；
canvasobj.strokeStyle=“红色”；
canvasobj.fillStyle=“橙色”；
canvasobj.arc（100,100,60,0,2*Math.PI）；
canvasobj.moveTo（100,0）；
canvasobj.lineTo（100240）；
canvasobj.stroke（）；
canvasobj.fill（）；
canvasobj.beginPath（）；
canvasobj.moveTo（5000,0）；
canvasobj.lineTo（0,0）；
canvasobj.stroke（）；
canvasobj.beginPath（）；
canvasobj.arc（500,100,60,0,2*Math.PI）；
canvasobj.moveTo（500,0）；
canvasobj.lineTo（500240）；
canvasobj.stroke（）；
canvasobj.fill（）
如果我们想一行一行地连接圆，我们需要两个输入来绘制直线，一个是起点和终点。所以我们可以从圆心得到两点，我们用来画圆的点。还有一件事需要注意的是，这里是连接两个由外圆，而不是从中心，所以我们需要添加或减去与线点的圆半径


//绘制画布的脚本
var canvas1=document.getElementById（“c1”）；
var canvasobj=canvas1.getContext（“2d”）；
canvasobj.lineWidth=10；
canvasobj.beginPath（）；
canvasobj.strokeStyle=“红色”；
canvasobj.fillStyle=“橙色”；
canvasobj.arc（100100,60,0,2*Math.PI）；
canvasobj.moveTo（100,0）；
canvasobj.lineTo（100240）；
canvasobj.stroke（）；
canvasobj.fill（）；
canvasobj.beginPath（）；
canvasobj.moveTo（5000,0）；
canvasobj.lineTo（0,0）；
canvasobj.stroke（）；
canvasobj.beginPath（）；
canvasobj.arc（500100,60,0,2*Math.PI）；
canvasobj.moveTo（500,0）；
canvasobj.lineTo（500240）；canvasobj.stroke（）；
canvasobj.fill（）；
canvasobj.beginPath（）；
canvasobj.moveTo（160100）；//这是直线（x，y）的起点
canvasobj.lineTo（440100）；//这是直线（x，y）的终点
//如果您想通过外部区域连接两个圆。在起始点，我们需要用x值添加圆半径，还需要从结束点减少x值
canvasobj.stroke（）