偶然看到斐波那契螺旋线（黄金螺旋线）的定义及画图方法，试着用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画斐波那契螺旋线（黄金螺旋线）的更多相关文章

  1. JS 从斐波那契数列浅谈递归

    一.前言 昨晚下班后,经理出于兴趣给我们技术组讲了讲算法相关的东西,全程一脸懵逼的听,中途还给我们出了一道比较有趣的爬楼问题,问题如下: 假设一个人从地面开始爬楼梯,规定一步只能爬一坎或者两坎,人只能 ...

  2. JS实现斐波那契数列的几种方法

    斐波那契数列指的是这样一个数列:1.1.2.3.5.8.13.21.34.…… 前两项为1,从第三项起,每一项等于前两项的和,即F(1)=1,F(2)=1, F(n)=F(n-1)+F(n-2)(n& ...

  3. JS写斐波那契数列的几种方法

    斐波那契数,指的是这样一个数列:1.1.2.3.5.8.13.21.……在数学上,斐波那契数列以如下被以递归的方法定义:F0=0,F1=1,Fn=Fn-1+Fn-2(n>=2,n∈N*),用文字 ...

  4. JS实现斐波那契数列的五种方式

    下面是五种实现斐波那契数列的方法 循环   function fibonacci(n){ var res1 = 1; var res2 = 1; var sum = res2; for(var i = ...

  5. js实现斐波那契数列

    1:递归 function fb1(n){     if(n <= 2){         return 1;        }else{         return fb1(n-1) + f ...

  6. JS求斐波那契数列的N项

    第一种求法: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF- ...

  7. js 斐波那契数列（兔子问题）

    对于JS初学者来说,斐波那契数列一直是个头疼的问题,总是理不清思路. 希望看完这篇文章之后会对你有帮助. 什么是斐波那契数列 : 答: 斐波那契数列,又称黄金分割数列.因数学家列昂纳多·斐波那契(Le ...

  8. 斐波那契数列公式算法-JS实现

    之前算斐波那契数列都是算前两个数相加实现的 比如0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233,377,610,987,1597,2584,4181 ...

  9. javascript . 03 函数定义、函数参数（形参、实参）、函数的返回值、冒泡函数、函数的加载、局部变量与全局变量、隐式全局变量、JS预解析、是否是质数、斐波那契数列

    1.1 知识点 函数:就是可以重复执行的代码块 2.  组成:参数,功能,返回值 为什么要用函数,因为一部分代码使用次数会很多,所以封装起来, 需要的时候调用 函数不调用,自己不会执行 同名函数会覆盖 ...

随机推荐

  1. 从零开始学习UNITY3D(GUI篇)

    邻近年底,心也有些散乱,加上工作忙了一阵,在达内培训的课程也落下了不少.对unity3d的热度似乎也有点点下降.痛定思痛,又在淘宝上买了写蛮牛网的视频.总之不管是用任何手段都要逼着自己不要浪费了培训的 ...

  2. 自己写的操作sql的公共类

    /* /' `\/ `. . .' : `. `. \\.' , `.` `. `. ,___/|\. `. : . \, .'./ ' '\ , ' .\ . \_.~ _; ; \/'. `\ . ...

  3. Top 10 Mapping APIs: Google Maps, Microsoft Bing Maps and MapQuest

    http://www.programmableweb.com/news/top-10-mapping-apis-google-maps-microsoft-bing-maps-and-mapquest ...

  4. This project references NuGet package(s) that are missing on this computer.

    Install Nuget. Right click on the solution and select "Enable NuGet Package Restore". Clic ...

  5. Win8.1重装win7或win10中途无法安装

    一.有的是usb识别不了,因为新的机器可能都是USB3.0的,安装盘是Usb2.0的. F12更改系统BIOS设置,我改了三个地方: 1.设置启动顺序为U盘启动 2.关闭了USB3.0 control ...

  6. Win7下安装Mysql方法

    最近刚刚在win7系统安装了mysql客户端数据库,现整理步骤供大家学习交流! 一.下载mysql安装包 安装包名称:mysql-5.6.12-win32.zip 下载地址:http://dev.my ...

  7. http 请求安全

    在info.plist中加入 <key>NSAppTransportSecurity</key><dict>    <key>NSAllowsArbit ...

  8. css区分ie6,7,ff

    IE6能识别*,但不能识别 !important,IE7能识别*,也能识别!important;FF不能识别*,但能识别!important; 可以这样区别FF,IE7,IE6: background ...

  9. linux杂记（十二?) 关于账号和密码的二三事

    关于密码的二三事 关于账号和密码的二三事 久了不更linux的相关知识,实在是懒得想内容点(纯粹是懒).那么今天就来谈谈关于linux密码和账号的重要概念. 假如你的主机遭到入侵,那么对方的第一个侵入 ...

  10. TextView settextcolor 无效解决方案

    viHolder.order_item_tipcolor.setBackgroundColor(context .getResources().getColor(R.color.order_xixie ...