Javascript 连接二次bé；SVG中的zier圆

我正在创建一个随机的SVG“Blob”生成器，但不知道如何正确地将最后一个bézier连接到“M”点。在这个例子中，你可以看到一个小尖峰

函数生成（）{
常数点=[
{x:55.380049480163834，y:8.141661255952418}，
{x:61.89338428790346，y:59.21935310168805}，
{x:6.637386502817552，y:65.10477483405401}，
{x:15.309460889587692，y:11.231848017862793}
]
设d=`M${points[0].x/2}${points[0].y}`
d+=`Q${点[0].x}${点[0].y}${（点[0].x+点[1].x）*0.5}${（点[0].y+点[1].y）*0.5}`
d+=`Q${点[1].x}${点[1].y}${（点[1].x+点[2].x）*0.5}${（点[1].y+点[2].y）*0.5}`
d+=`Q${点[2].x}${点[2].y}${（点[2].x+点[3].x）*0.5}${（点[2].y+点[3].y）*0.5}`
d+=`Q${点[3].x}${点[3].y}${（点[3].x+点[0].x）*0.5}${（点[3].y+点[0].y）*0.5}Z`
返回d
}
document.getElementById（'blob'）.setAttribute（'d'，generate（））

---

我将这样做：首先，您需要找到第一个中点（在最后一个点和第一个点之间）并移动到它。接下来，计算点阵列中每2个点之间的中点。最后，通过最后一个点绘制曲线，回到第一个中点

const points=[
{x:55.380049480163834，y:8.141661255952418}，
{x:61.89338428790346，y:59.21935310168805}，
{x:6.637386502817552，y:65.10477483405401}，
{x:15.309460889587692，y:11.231848017862793}
]
函数绘制曲线（点）{
//找到第一个中点并移动到它
var p={}；
p、 x=（点[points.length-1].x+点[0].x）/2；
p、 y=（点[points.length-1].y+点[0].y）/2；
设d=`M${p.x}，${p.y}`；
//曲线通过其余部分，在每个中点停止
对于（变量i=0；i
svg{边框：1px实心；填充：无；笔划：黑色；宽度：300px；}

你的路径的起点是
点[0].x/2，点[0].y
但你的终点是
（点[3].x+点[0].x）/2，（点[3].y+点[0].y）/2
，而这些点甚至都不一样…@NiettheDarkAbsol修复尖峰，但使“M”变为“M”点一个硬边。鉴于这些点，不清楚你的路径应该如何工作…@NiettheDarkAbsol我想连接这4个点，使它们形成一个不均匀的圆。好吧，现在你正在使用这些点本身作为控制点坐标，而不是要连接的点。。。