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