Javascript 使螺旋线穿过任意点的最简单方法？_Javascript_Html5 Canvas

Javascript 使螺旋线穿过任意点的最简单方法？

javascript html5-canvas

Javascript 使螺旋线穿过任意点的最简单方法？,javascript,html5-canvas,Javascript,Html5 Canvas,const canvas=document.querySelector（'canvas'）； const ctx=canvas.getContext（'2d'）； ctx.strokeStyle=“黑色”； ctx.lineWidth=1； ctx.beginPath（）；让last=1 让我们开始=1 设i=0 让原点=[250250] for（设i2=0；i20和b>0的值都将导致斐波那契螺旋。很抱歉，我没有理解你评论中的任何内容。@je3rdty应该道歉的是我。对不起，我已经更新了答案，

const canvas=document.querySelector（'canvas'）；
const ctx=canvas.getContext（'2d'）；
ctx.strokeStyle=“黑色”；
ctx.lineWidth=1；
ctx.beginPath（）；
让last=1
让我们开始=1
设i=0
让原点=[250250]
for（设i2=0；i2<20；i2++）{
椭圆（…原点，起点，起点，Math.PI/2*i，0，Math.PI/2）；
我++
i%=4
如果（i==1）原点[1]=last
如果（i==2）原点[0]+=last，则为else
else如果（i==3）原点[1]+=last
如果（i==0）原点[0]-=last；
[最后，开始]=[开始，开始+最后]
}
ctx.stroke（）；
ctx.beginPath（）
ctx.lineCap='圆形'
ctx.lineWidth=7
ctx.strokeStyle=“红色”；
ctx.lineTo（400400）
ctx.stroke（）

我不确定您希望螺旋线如何截取该点。有twp选项

旋转缓和曲线到截距点

缩放缓和曲线到截距点

这个答案使用方法1解决。方法2存在一些问题，因为如果我们不设置截距点的限制，旋转次数可能会呈指数增长，使得渲染非常缓慢

不是螺旋式的您提供的代码没有在数学定义中绘制螺旋，而是一组连接的椭球

这意味着有多个函数定义这些连接曲线上的点。解算一个点需要一定的复杂性，因为必须解算每条可能的曲线，然后对解进行审查以定位正确的曲线。在这个椭球体的上面，我发现了一些非常难看的数学结果

螺旋函数如果我们将曲线定义为一个函数，其中螺旋半径由角度定义，则很容易求解

半径的函数可以是一个简化多项式，形式为

Ax^p+C

，其中x是角度，

是螺旋度（缺少更好的术语），

是刻度（同样缺少更好的术语），而

是起始角度

如果你想使螺旋的步进角成为一个设定的长度，例如1px将是

angle+=1/（Ax^p+C）

如果C为0，那么

1/0

将导致无限循环

画螺旋线如上所述，可以渲染多种类型的缓和曲线，因此应该有一种接近现有缓和曲线的缓和曲线

螺旋上的任意点如下所示

x = cos(angle) * f(angle) + origin.x
y = sin(angle) * f(angle) + origin.y

其中f是多边形

f（x）=Ax^p+C

下面的函数绘制一条基本的线性缓和曲线f（x）=1*x^1+0.1

function drawSpiral(origin) {
    ctx.strokeStyle = "black";
    ctx.lineWidth = 3;
    ctx.beginPath();
    let i = 0;
    while (i < 5) {
        const r = i + 0.1; // f(x) = 1*x^1+0.1
        ctx.lineTo(
            Math.cos(i) * r + origin.x,
            Math.sin(i) * r + origin.y
        );
        i += 0.1 
    }
    ctx.stroke(); 
}

canvas{位置：绝对；顶部：0px；左侧：0px；背景：黑色}