用JS画斐波那契螺旋线（黄金螺旋线）

时间：2024-03-03 08:35:18

偶然看到斐波那契螺旋线（黄金螺旋线）的定义及画图方法，试着用JS画了一下，很漂亮，很好玩

具体定义及画法大家查一下就有了，很简单。

以下是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FibonacciSequence</title>
</head>
<body>
<canvas id="myCanvas" width="1000" height="800" style="background-color:#ddd;"></canvas>

<input type="text" onchange="draw_many(parseInt(this.value))" />

<script type="text/javascript">

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

//优化的斐波那契数列计算，把数列结果用数组保存
//用传统递归太慢了太费内存了
var fib_val = [0,1]
function fib (n) {
    var len = fib_val.length;
    for(var i=len; i<=n; i++){
        fib_val.push( fib_val[i-1] + fib_val[i-2] )
    }
    return fib_val[n] 
}

//画斐波那契螺旋线（黄金螺旋线）
//n表示计算数列到多少
function draw (n) {
    for (var i = 1; i < n; i++) {
        var len = fib(i);    
        //ctx.strokeRect(0,0,len,len)//画矩形的，可以看到产生的原理
        //画扇形
        ctx.beginPath();
        ctx.arc(len,0,len,Math.PI/2,2*Math.PI/2);
        ctx.stroke();

        //把原点移到原来原点的对角线上，然后旋转270度
        //这样画起来简单
        ctx.translate(len, len)
        ctx.rotate(3*Math.PI/2);
    };
}

//画好多条螺旋线，漂亮
function draw_many (n) {
    var total = n
    //清除画布
    ctx.clearRect(0,0,800,800);
    for(var i=0;i<total;i++){
        //保存状态，这样好恢复原点之类的状态
        ctx.save();    
        //中心移到画布中间
        ctx.translate(400,400);
        //画一条旋转一点
        ctx.rotate(360/total*i*Math.PI/180);
        draw(15);
        //恢复状态
        ctx.restore();
    }
}

//画180条线，很漂亮 
draw_many(180)

</script>    
</body>
</html>

 

下面是效果，试着改一下画的数量看，按回车看效果

 

输入要画线的数量：
 

相关文章