當(dāng)前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

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

發(fā)布時間：2023/12/13 综合教程 40 生活家

生活随笔收集整理的這篇文章主要介紹了用JS画斐波那契螺旋线（黄金螺旋线）小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

偶然看到斐波那契螺旋線（黃金螺旋線）的定義及畫圖方法，試著用JS畫了一下，很漂亮，很好玩

具體定義及畫法大家查一下就有了，很簡單。

以下是代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FibonacciSequence</title>
</head>
<body>
<canvas id="myCanvas" width="1000" height="800"></canvas>

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

<script type="text/javascript">

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

//優(yōu)化的斐波那契數(shù)列計算，把數(shù)列結(jié)果用數(shù)組保存
//用傳統(tǒng)遞歸太慢了太費內(nèi)存了
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表示計算數(shù)列到多少
function draw (n) {
    for (var i = 1; i < n; i++) {
        var len = fib(i);    
        //ctx.strokeRect(0,0,len,len)//畫矩形的，可以看到產(chǎn)生的原理
        //畫扇形
        ctx.beginPath();
        ctx.arc(len,0,len,Math.PI/2,2*Math.PI/2);
        ctx.stroke();

        //把原點移到原來原點的對角線上，然后旋轉(zhuǎn)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++){
        //保存狀態(tài)，這樣好恢復(fù)原點之類的狀態(tài)
        ctx.save();    
        //中心移到畫布中間
        ctx.translate(400,400);
        //畫一條旋轉(zhuǎn)一點
        ctx.rotate(360/total*i*Math.PI/180);
        draw(15);
        //恢復(fù)狀態(tài)
        ctx.restore();
    }
}

//畫180條線，很漂亮 
draw_many(180)

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

下面是效果，試著改一下畫的數(shù)量看，按回車看效果

輸入要畫線的數(shù)量：顯示矩形

總結(jié)

以上是生活随笔為你收集整理的用JS画斐波那契螺旋线（黄金螺旋线）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。