html - 如何在html canvas元素中的两个圆圈之间画线

Question

我是 HTML canvas 的初学者，我正在尝试创建一个设计，我可以在两个圆圈之间创建一条水平线这里是我想要的 Canvas ，直到现在我无法弄清楚如何将这两个圆圈与行

//Script to draw the canvas 
var canvas1 = document.getElementById("c1");
var canvasobj = canvas1.getContext("2d");
canvasobj.lineWidth = 10;
canvasobj.beginPath();
canvasobj.strokeStyle = "red";
canvasobj.fillStyle = "orange";
canvasobj.arc(100, 100, 60, 0, 2 * Math.PI);
canvasobj.moveTo(100, 0);
canvasobj.lineTo(100, 240);
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(500, 240);
canvasobj.stroke();
canvasobj.fill();

<canvas id="c1" class="drawncanvas" width="1500" height="500" style="border:1px solid red;"></canvas>

JS Fiddle 链接:https://jsfiddle.net/daz_001/kvw4n9pu/

Answer 1

如果我们想用线连接圆，我们需要两个输入用于画线，一个是起点和终点。所以我们可以从我们用来画圆的圆点的中心得到两个点。这里还有一点需要注意的是，两者是通过圆的外圆而不是圆心连接起来的，所以我们需要用线点加上或减去圆的半径。

//Script to draw the canvas 
                    var canvas1 = document.getElementById("c1");
                    var canvasobj = canvas1.getContext("2d");
                    canvasobj.lineWidth = 10;
                    canvasobj.beginPath();
                    canvasobj.strokeStyle ="red";
                    canvasobj.fillStyle="orange";
                    canvasobj.arc(100,100,60,0,2*Math.PI);
                    canvasobj.moveTo(100,0);
                    canvasobj.lineTo(100,240);
                    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(500,240); canvasobj.stroke();
                    canvasobj.fill();
                    canvasobj.beginPath();
                    canvasobj.moveTo(160,100); // this is the begining point of the line (x,y)
                    canvasobj.lineTo(440,100);// this is the ending point of the line (x,y)
                    
                    //if you want to connect two circle by outer area. In the begining point we need to add the circle radius with x value also need to reduce the x value from ending point
                    canvasobj.stroke();

<canvas id="c1" class="drawncanvas"  width="1500" height="500" style="border:1px solid red;"></canvas> 

Updated fiddle link