用JS画斐波那契螺旋线（黄金螺旋线）
生活随笔
收集整理的這篇文章主要介紹了
用JS画斐波那契螺旋线（黄金螺旋线）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
偶然看到斐波那契螺旋線（黃金螺旋線）的定義及畫圖方法，試著用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');
//優化的斐波那契數列計算，把數列結果用數組保存
//用傳統遞歸太慢了太費內存了
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>
下面是效果，試著改一下畫的數量看，按回車看效果
輸入要畫線的數量：
總結
以上是生活随笔為你收集整理的用JS画斐波那契螺旋线（黄金螺旋线）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 斜率优化（转载）
- 下一篇： smf和mmf分别是什么？