偶然看到斐波那契螺旋线（黄金螺旋线）的定义及画图方法，试着用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>
下面是效果，试着改一下画的数量看，按回车看效果
输入要画线的数量：