Javascript 画布：如何围绕指定的紫色圆点从指定的橙色圆点到指定的绿色圆点绘制螺旋线

我试图画一个从“起点”到“终点”的螺旋线。螺旋线也有一个给定的中心点，所以它可以围绕该中心点绘制螺旋线。 我不能让它工作，不知为什么数学是完全错误的。 关于如何解决这个问题有什么建议吗

var c=document.getElementById（“myCanvas”）；
var cxt=c.getContext（“2d”）；
//螺旋坐标的中心：
var centerX=400；
var centerY=300；
//绘制缓和曲线点的中心：
drawCirc（centerX，centerY，10'#6f0c4f'）；
var-gap=8；
每旋转一次的var步数=50；
var旋转=4；
var increment=旋转*Math.PI/每旋转步数；
varθ=增量；
//起点：
var startX=500；
var-startY=380；
//终点：
var endX=600
var endY=300；
//将起点和终点绘制为小圆：
drawCirc（startX，startY，6'#FF0000'）；
drawCirc（endX，endY，6'#00FF00'）；
//尝试计算θ开始位置：
θ=Math.abs（（（centerX-startX）/Math.cos（θ））/gap）；
var-ind=0；
while（θ<旋转*Math.PI*2）{
var newX=中心x+θ*数学cos（θ）*间隙；
var newY=中心+θ*数学sin（θ）*间隙；
var-ukwObj={x:newX，y:newY}；
如果（ind==0）{
//使用不同的颜色绘制起点以进行区分
drawCirc（newX，newY，2，'橙色'）；
}否则{
drawCirc（newX，newY）；
}
ind++；
θ=θ+增量；
}
函数drawCirc（x，y，半径=2，笔划=000000）{
cxt.beginPath（）；
cxt.弧（x，y，半径，0，2*Math.PI）；
cxt.strokeStyle=冲程；
cxt.stroke（）；
cxt.fillStyle=冲程；
cxt.fill（）；
}
cxt.stroke（）；//绘制螺旋线

绘制圆的原理是：
给定一个圆心

x，y

，一个半径

r

，我们可以通过计算它们的坐标来绘制属于圆的点，如下所示：

px=x+r*Math.cos（角度）

和

py=y+r*Math.sin（角度）

当角度从0到

2*Math.PI

变化时 如果

r

随着角度的变化而增大，我们得到一个向外的螺旋线（从角度0到角度2*PI，相当于0）

对于手头的问题，我们需要以极坐标（距离、角度）计算螺旋线的起点和终点位置。
因此，我们需要计算开始角度、开始距离、结束角度和结束距离，并通过逐渐增加角度和距离来绘制每个点

最初的θ计算是错误的，我改变了它

然后我需要计算中心和起点之间的起始距离，以及中心和终点之间的终点距离

在旋转过程中，从起点距离到终点距离进行旋转

总角度距离应为

totalTheta=numberOfRotation*2*Math.PI+（endAngle-startAngle）

，我将

rotations*Math.PI*2

替换为

totalTheta

）

为了好玩，为了证明它在任何初始条件下都有效，我将开始位置、结束位置和旋转次数稍微随机化

我还减少了每次迭代时的角度增量，以使每个点之间的距离看起来更均匀，但您可以进行注释以保持恒定的角速度

下面的解决方案将随机选择一个橙色圆点、一个绿色圆点和若干圈来完成螺旋，并围绕固定的紫色圆点绘制螺旋。

var c=document.getElementById（“myCanvas”）；
var cxt=c.getContext（“2d”）；
//螺旋坐标的中心：
var centerX=200；
var centerY=150；
//绘制缓和曲线点的中心：
drawCirc（centerX，centerY，10'#6f0c4f'）；
var-gap=8；
每旋转一次的var步数=50；
变量旋转=1+parseInt（Math.random（）*5,10）；
var increment=旋转*Math.PI/每旋转步数；
varθ=增量；
var-dist=0；
//起点：
var startX=centerX+（Math.random（）*150-75）；
var startY=centerY+（Math.random（）*150-75）；
var startAngleOffset=startX>centerX？（startY>centerY？0:0）：（startY>centerY？Math.PI:Math.PI）；
变量startAngleSign=startX>centerX？（startY>centerY？1:-1）：（startY>centerY？-1:1）；
//终点：
var endX=centerX+（Math.random（）*150-75）；
var endY=centerY+（Math.random（）*150-75）；
var endAngleOffset=endX>centerX？（endY>centerY？0:0）：（endY>centerY？Math.PI:Math.PI）；
变量endAngleSign=endX>centerX？（endY>centerY？1:-1）：（endY>centerY？-1:1）；
//将起点和终点绘制为小圆：
drawCirc（startX，startY，6'#FF0000'）；
drawCirc（endX，endY，6'#00FF00'）；
var startTheta=theta=startAngleOffset+startAngleSign*Math.atan（Math.abs（startY-centerY）/Math.abs（startX-centerX））；
var endTheta=endAngleOffset+endAngleSign*Math.atan（Math.abs（endY-centerY）/Math.abs（endX-centerX））；
var totalTheta=旋转*2*Math.PI+（endTheta-startTheta）
dist=Math.sqrt（Math.pow（startY-centerY，2）+Math.pow（startX-centerX，2））；
finalDist=Math.sqrt（Math.pow（endY-centerY，2）+Math.pow（endX-centerX，2））；
var-ind=0；
while（θ-开始θ<总θ）{
var currentDist=（dist+（（finalDist-dist）*（（theta-startTheta）/（totalTheta））；
var newX=centerX+currentDist*Math.cos（θ）；
var newY=中心Y+当前距离*数学sin（θ）；
var-ukwObj={x:newX，y:newY}；
如果（ind==0）{
//使用不同的颜色绘制起点以进行区分
drawCirc（newX，newY，2，'橙色'）；
}否则{
drawCirc（newX，newY）；
}
ind++；
θ=th