Javascript 如何使用loop&；绘制完美的倍数线螺旋；积分？

我有一个用点画螺旋线的代码

var c=document.getElementById（“myCanvas”）；
var cxt=c.getContext（“2d”）；
var centerX=400；
var centerY=400；
cxt.moveTo（centerX、centerY）；
var计数=0；
var增量=3/32；
var距离=10；
对于（θ=0；θ<50；θ++）{
var newX=中心x+距离*Math.cos（（θ）*4*Math.PI*增量）；
var newY=中心+距离*数学sin（（（θ））*4*数学PI*增量）；
cxt.fillText（“o”，newX，newY）；
计数++；
如果（计数%4==0）{
距离=距离+10；
}
}
cxt.stroke（）
将代码更改为数字形式的增量后，您可以看到预期行中没有生成“螺旋”

您将需要计算出需要多少个螺旋臂，并使用stoplimit进行计算

增量值也从不使用

// var increment = 6/45; 
var stoplimit = 51;  

这里有很多问题。就像@Anytech所说的，你需要首先决定你想要多少个手臂（一串点）。在你的截图中，看起来你有5只手臂，但你可能是偶然得到的。我已将“o”替换为距离，以帮助将问题形象化：


var c=document.getElementById（“myCanvas”）；
var cxt=c.getContext（“2d”）；
var centerX=200；
var centerY=200；
cxt.moveTo（centerX、centerY）；
var计数=0；
var增量=3/32；
var距离=10；
对于（θ=0；θ<50；θ++）{
var newX=中心x+距离*Math.cos（（θ）*4*Math.PI*增量）；
var newY=中心+距离*数学sin（（（θ））*4*数学PI*增量）；
cxt.fillText（距离，newX，newY）；
计数++；
如果（计数%4==0）{
距离=距离+10；
}
}
cxt.stroke（）
圆的周长是
2*PI*半径

我们可以用它来确定覆盖圆周距离的角度步长。因此，沿曲线扫掠给定距离的角度为距离/半径（注意，这不是直线距离，而是沿曲线的距离）

虽然您正在创建螺旋，并且角度步长的距离稍长（当直线向外移动时），但近似值对于人眼来说就足够了

因此，通过以下步骤更改代码


删除
增量
将距离更改为半径
我们将使用半径来限制螺旋的最大半径，而不是限制圈数。添加
maxRadius=350
以适合画布
添加
lineLength
以设置每个点之间的近似距离（以像素为单位）
将for循环更改为while循环，因为我们将要在循环内步进角度
将
theta
重命名为
angle
（我们是程序员而不是数学家）
我们将创建一条圆弧路径，以便精确定位，而不是使用角色绘制每个点。这将添加一些2D上下文设置代码
我们将使半径成为角度的函数，而不是每4点一步（因为这不再有效）。这样就可以添加一些常数来控制半径函数
radiusMin
定义最小半径（起始半径）
radiusScale
定义螺旋线向外移动的每圈像素速率
删除
count
，因为它不再需要
在循环内计算半径。由于我们将半径增长定义为每圈的速率，我们将
radiuscale/（Math.PI*2）
除以，因此半径为
radius=angle*（radiuscale/（Math.PI*2））+radiusMin

在循环内部，我们步进角度以匹配我们想要移动的距离
angle+=lineLength/radius由周长公式导出（以及为什么我们使用弧度表示角度）

将
cxt
更改为更惯用的
ctx
添加
moveTo
移动到每个圆的起点
添加
ctx.arc
以定义圆
定义所有圆后，在循环后使用
ctx.stroke（）

下面是代码。因为我只是近似于你的螺旋，你可以利用常数使它符合你的需要。还要注意的是，对于内部螺旋线，较长的线距离也不起作用


const ctx=myCanvas.getContext（“2d”）；
常数centerX=400；
常数中心Y=400；
常量标记半径=2；//每个圆标记的半径（以像素为单位）
常数maxRadius=350；//50像素边界
常数线宽=20；//点之间的距离（以像素为单位）
常数半径刻度=80；//螺旋线每转向外移动的速度有多快
常数radiusMin=10；//起始半径
变量角度=0，半径=0；
ctx.lineWidth=1；
ctx.strokeStye=“黑色”；
ctx.beginPath（）；
while（半径<最大半径）{
半径=角度*（半径刻度/（数学PI*2））+半径最小值；
角度+=线宽/半径；
常数x=中心x+半径*数学cos（角度）；
常数y=中心y+半径*数学sin（角度）；
ctx.移动到（x+标记半径，y）；
弧（x，y，标记半径，0，数学PI*2）；
}
ctx.stroke（）；

我将增量更改为1.05/5，它仍然是不平衡的ID您使用
计数%5
而不是
计数%4
？看一看，它是平衡的：左下分支比其他分支短，将数字更改为“o”&您看得更清楚抱歉，我真的看不到问题。它缺了一个点而变短了吗？我可以精确地计算出每只手臂10个点。嗨，手臂仍然有和我一样的问题，我发现了一个完美的手臂弯曲的螺旋形，你知道如何像这样画吗？