偶然看到斐波那契螺旋线（黄金螺旋线）的定义及画图方法，试着用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. 如何在其他类中实现继承自CFormView类的对象

    今天项目开发中,我们创建了一个对话框资源,并创建了一个派生自CFormView的类(假设为CMyClassDlg)来管理它. CMyClassDlg.h #pragma once // CMyClas ...

  2. C++ 文件操作实例

    图1 文件个数及名称 图2 文件内容 背景:如图1所示,现有9个要处理的文件,每个文件的内容格式如图2所示,仅仅只是数值部分不同. 问题:如何提取每个文件中的相同属性的数值到同一个文件中? 输出示例: ...

  3. c#Ulong用一个高位Uint和低位Uint表示

    有时候考虑到平台之间的通用性,可能把一个Ulong拆分成2个Uint来进行各平台之间的通讯,当时转换的时候有点头晕,对与或预算不是很熟悉,不过还是花了半小时弄出来了,代码: //ulong的最大值2^ ...

  4. Twemproxy 分布式集群缓存代理服务器

    Twemproxy 分布式集群缓存代理服务器 是一个使用C语言编写.以代理的方式实现的.轻量级的Redis代理服务器, 它通过引入一个代理层,将应用程序后端的多台Redis实例进行统一管理, 使 应用 ...

  5. ImageView 各种工具类

    package imageUtil; import java.io.File; import java.io.FileNotFoundException; import java.io.FileOut ...

  6. ODI学习笔记2--ODI产品架构

    ODI学习笔记2--ODI产品架构 ODI产品架构: ODI提供了以下几种管理工具:Designer 用于定义数据转换逻辑,这是最常用的开发工具,大部分的开发任务,包括data store的定义,in ...

  7. 简单测试运行时类信息（RTTI），附详细例子

    新建一个单元文件,填写如下代码,然后保存为 ClassInfoUnit.pas,这里定义了一个结构,用来读取指定类的信息. unit ClassInfoUnit; interface uses Cla ...

  8. c# winform读取xml创建菜单

    动态创建菜单使得程序灵活性大大增加,本文根据读取xml文件中的配置菜单项来动态创建菜单,代码如下: using System; using System.Collections.Generic; us ...

  9. 自己动手写RTP服务器——传输所有格式的视频

    上一篇文章我们介绍了如何用一个简单的UDP socket搭建一个RTP服务器.我把这份80行的代码呈现到客户面前的时候,就有人不满意了. 还有人在参考的时候会问:“楼主你的TS格式的文件是哪里来的?应 ...

  10. 夜未央Test1题解

    T1 积木游戏              树状数组的一个简单应用,建立一个维护左节点的树状数组和一个维护右节点的树状数组,对于add操作,只要在维护左节点的树状数组l处加1,维护右节点的树状数组r处加 ...