Wie zeichne Linie zwischen zwei Kreis in html canvas Element

Question

Ich bin ein Anfänger zu HTML-Leinwand und ich versuche, ein Design zu erstellen, wo ich eine horizontale Linie zwischen zwei Kreis erstellen kann hier ist die Leinwand, die ich bis jetzt wollte ich kann herauszufinden, wie ich mit einer Linie

//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 Link zu diesem zwei Kreis trete: https://jsfiddle.net/daz_001/kvw4n9pu/

Answer 1

Wenn wir den Kreis durch die Linie verbinden wollen, müssen wir zwei Eingänge für Strichzeichnung man ist Anfangs- und Endpunkt. So können wir den zwei Punkt von der Mitte des Kreispunktes erhalten, den wir zum Zeichnen des Kreises benutzt haben. eine weitere Sache ist hier anzumerken, dass man die beiden durch äußere Kreise verbinden muss, anstatt vom Zentrum, so dass wir den Radius des Kreises mit Linienpunkten addieren oder subtrahieren müssen.

//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