Javascript 如何使用循环将圆水平对齐？

我已经设法使这些圆彼此重叠，但我不知道如何画出一条不重叠的圆线

这就是我到目前为止所得到的

HTML

JavaScript

任何下一个圆的x值必须至少是当前圆x值之外的当前圆半径和下一个圆半径的总和

因此，如果：

然后：

但如果你也在划圆圈：

由于上下文笔划将在定义的路径外延伸一半，因此还必须为每个圆添加一半线宽，以避免圆接触：

// account for the lineWidth that extends beyond the arc's path
var nextCircleX = 
    currentCircleX + currentCircleRadius + nextCircleRadius + context.lineWidth

示例代码和演示：

var canvas=document.getElementByIdcanvas； var ctx=canvas.getContext2d； var cw=画布宽度； var ch=画布高度； ctx.fillStyle=rgba0,0,0.5； var currentCircleX=0； var currentCircleRadius=0； forvar i=0；i<10；i++{ var nextCircleRadius=i*20； var nextCircleX=currentCircleX+currentCircleRadius+nextCircleRadius； fillCirclenextCircleX，200，nextCircleRadius； currentCircleX=nextCircleX； currentCircleRadius=nextCircleRadius； } 函数fillCirclex，y，半径{ ctx.beginPath； ctx.arcx，y，半径，0，Math.PI*2； ctx.closePath； ctx.fill； } 正文{背景色：象牙色；填充：10px；} 画布{边框：1px纯红；}

---

哎呀！我最初回答了你的问题，显示了垂直对齐。我看到您想要水平对齐，并已编辑了我的答案：-非常感谢这对我帮助很大！

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');

for(var i = 0; i < 10; i++) {
    ctx.fillStyle="rgba(0,0,0,0.5)";
    fillCircle(200,200,i*20)
}

var width = window.innerWidth;
var height = 100;

function fillCircle(x, y, radius) {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2);
    ctx.closePath();
    ctx.fill();
}

var currentCircleX=20
var currentCircleRadius=15
var nextCircleRadius=25

var nextCircleX = currentCircleX + currentCircleRadius + nextCircleRadius

// account for the lineWidth that extends beyond the arc's path
var nextCircleX = 
    currentCircleX + currentCircleRadius + nextCircleRadius + context.lineWidth