首页 > 代码库 > 用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" 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>
下面是效果，试着改一下画的数量看，按回车看效果
输入要画线的数量：
用JS画斐波那契螺旋线（黄金螺旋线）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。