用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画斐波那契螺旋线(黄金螺旋线)的更多相关文章
- JS 从斐波那契数列浅谈递归
一.前言 昨晚下班后,经理出于兴趣给我们技术组讲了讲算法相关的东西,全程一脸懵逼的听,中途还给我们出了一道比较有趣的爬楼问题,问题如下: 假设一个人从地面开始爬楼梯,规定一步只能爬一坎或者两坎,人只能 ...
- 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& ...
- JS写斐波那契数列的几种方法
斐波那契数,指的是这样一个数列:1.1.2.3.5.8.13.21.……在数学上,斐波那契数列以如下被以递归的方法定义:F0=0,F1=1,Fn=Fn-1+Fn-2(n>=2,n∈N*),用文字 ...
- JS实现斐波那契数列的五种方式
下面是五种实现斐波那契数列的方法 循环 function fibonacci(n){ var res1 = 1; var res2 = 1; var sum = res2; for(var i = ...
- js实现斐波那契数列
1:递归 function fb1(n){ if(n <= 2){ return 1; }else{ return fb1(n-1) + f ...
- JS求斐波那契数列的N项
第一种求法: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF- ...
- js 斐波那契数列(兔子问题)
对于JS初学者来说,斐波那契数列一直是个头疼的问题,总是理不清思路. 希望看完这篇文章之后会对你有帮助. 什么是斐波那契数列 : 答: 斐波那契数列,又称黄金分割数列.因数学家列昂纳多·斐波那契(Le ...
- 斐波那契数列公式算法-JS实现
之前算斐波那契数列都是算前两个数相加实现的 比如0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233,377,610,987,1597,2584,4181 ...
- javascript . 03 函数定义、函数参数(形参、实参)、函数的返回值、冒泡函数、函数的加载、局部变量与全局变量、隐式全局变量、JS预解析、是否是质数、斐波那契数列
1.1 知识点 函数:就是可以重复执行的代码块 2. 组成:参数,功能,返回值 为什么要用函数,因为一部分代码使用次数会很多,所以封装起来, 需要的时候调用 函数不调用,自己不会执行 同名函数会覆盖 ...
随机推荐
- Objective-C内存管理教程和原理剖析(四)
初学Objective-C的朋友都有一个困惑,总觉得对Objective-C的内存管理机制琢磨不透,程 序经常内存泄漏或莫名其妙的崩溃.我在这里总结了自己对Objective-C内存管理机制的研究成果 ...
- 权威指南学习心得-浏览器中的js
window对象:表示web了浏览器的一个窗口或窗体(winow属性引用自身) 含有以下属性:location包含Location对象,指定当前显示在窗口中URL,允许脚本往窗口里载入新的URL 含有 ...
- 学会用这二个键,你就是电脑高手了,一个是Win键,另一个是Ctrl!
学会用这二个键,你就是电脑高手了,一个是windows键,另一个是Ctrl键. 一.windows键 1. 很多时候,需要离开座位去做别的事情,如果对自己的电脑安全很重视,不妨按住windows键后, ...
- js substr()与substring()的区别
定义和用法 substr 方法用于返回一个从指定位置开始的指定长度的子字符串. 语法 stringObject.substr(start [, length ]) 参数 描述 start 必需.所需的 ...
- uva424 高精度计算
题意是计算各长整数的和,最多输入100个数,每个数都是正整数且位数不超过100. 很明显100位的数用数组存会方便许多,然后设置两个整型数组,一个存进位,一个存结果.为了对齐进行运算,我将所有的数先逆 ...
- Ubuntu 14.04 上使用 Nginx 部署 Laravel
本教程将会涉及以下工具: Ubuntu 14.04 LTS PHP 5.5 MySQL Laravel 5.0 Nginx 参考文章:Ubuntu 14.04 上使用 Nginx 部署 Laravel ...
- nyoj 228 士兵杀敌(五)
题目: http://acm.nyist.net/JudgeOnline/problem.php?pid=228 由于该题一开始是进行士兵军功增加,最后才是查找士兵的军功总和,使用一个数组,进行延迟更 ...
- CSS3 旋转 太阳系
参考https://www.tadywalsh.com/web/cascading-solar-system/ 首先 旋转有两种方式 一种是使用 transform-origin 另一种是tran ...
- :last-child的诡异的问题!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- android小知识之中如何获取当前时间
百度整理过来的 [java] view plaincopyprint? import java.text.SimpleDateFormat; SimpleDateFormat format ...