使用canvas 绘制斐波那契螺旋线（斐波那契数列的应用）

在文章的开头，我们先来认识一下斐波那契数列
斐波那契数列 又被称作是 兔子数列

e.g. 1、1、2、3、5、8、13、21、34、…

从上面的例子可以看出斐波那契数列的规律，就是从第三个数开始，每个数的值都是它前两个数之和。

再来看一下例子程序：

function getFibonacci(n) {let arr = []let i = 0while (i < n) {if (i <= 1) {arr.push(i)}else {arr.push(arr[i - 1] + arr[i - 2])}i++}return arr
}

知道了斐波那契数列 之后怎么用呢？今天来教你使用Canvas 来绘制斐波那契螺旋线。

先来看一张斐波那契螺旋线 的图片

我们要画的就是上图中的曲线。
现在开始贴代码，代码中的难点都带有注释。

let ctx = canvas.getContext('2d')
ctx.beginPath();
ctx.arc(300, 240, 5, Math.PI, 0.5 * Math.PI, true);
ctx.arc(300, 235, 10, Math.PI * 0.5, 0, true);
ctx.arc(295, 235, 15, 0, Math.PI * 1.5, true);
ctx.arc(295, 245, 25, Math.PI * 1.5, Math.PI, true);
ctx.arc(310, 245, 40, Math.PI, Math.PI * 0.5, true);
ctx.arc(310, 220, 65, Math.PI * 0.5, 0, true);
ctx.arc(270, 220, 105, 0, Math.PI * 1.5, true);
ctx.arc(270, 285, 170, Math.PI * 1.5, Math.PI, true);
ctx.strokeStyle = '#fff'
ctx.stroke();

上面的代码是利用Canvas 直接画螺旋线的代码。
可以作为下面利用斐波那契数列 画螺旋线的代码的参考

let canvas = document.getElementsByTagName('canvas')[0]
canvas.width = 600
canvas.height = 480
let coor = {x: 300,y: 240,
}
//先取背景图中的中间点作为一开始的圆点let ctx = canvas.getContext('2d')
//获取该canvas的2D绘图环境对象/*
绘制曲线方法
@param prevR 这是斐波那契数列中前一位的数值，也就是上一截曲线的半径
@param n 这是斐波那契数列中的下标
@param r 这是斐波那契数列当前下标的值，也就是将画曲线的半径
*/
function draw(prevR, n, r) {let radius = r * 5 //五倍半径画，不然太小了let startAngle = Math.PIlet endAngle = Math.PI * 0.5//每个半径只画1/4个圆，所以开始角度和结束角度刚好相差 1/4 * PIlet anticlockwise = true//设置为逆时针方向画//改变圆点坐标、开始角度和结束角度//第三个元素的圆点坐标、开始角度和结束角度上面已经给出，所以从第四个元素开始改变圆点坐标、开始角度和结束角度，也就是从n > 2开始if (n > 2) {//下面坐标的改变可以参考上面的图和直接用canvas画的代码。switch(n % 4) {case 0:coor.x = coor.x + (5 * prevR) - radiusstartAngle = 0endAngle = Math.PI * 1.5break;case 1:coor.y = coor.y - (5 * prevR) + radiusstartAngle = Math.PI * 1.5endAngle = Math.PIbreak;case 2:coor.x = coor.x - (5 * prevR) + radiusstartAngle = Math.PIendAngle = Math.PI * 0.5break;case 3:coor.y = coor.y + (5 * prevR) - radiusstartAngle = Math.PI * 0.5endAngle = 0break;}}ctx.beginPath()ctx.arc(coor.x, coor.y, radius, startAngle, endAngle, anticlockwise)ctx.lineWidth = 1ctx.strokeStyle = '#fff'ctx.stroke()
}
//获取斐波那契数列
function getFibonacci(n) {let arr = []let i = 0while (i < n) {if (i <= 1) {arr.push(i)}else {arr.push(arr[i - 1] + arr[i - 2])}i++}return arr
}
let fibonacci = getFibonacci(10)
for (let i = 0; i < fibonacci.length; i++) {//从第三个元素开始画，符合斐波那契数列的规律if (i >= 2) {draw(fibonacci[i - 1], i, fibonacci[i])}
}

—–我是分隔线—–
最终画出来的效果可以看下面这个链接:
Fibonacci spiral

使用canvas 绘制斐波那契螺旋线（斐波那契数列的应用）相关推荐

用Python绘制斐波那契螺旋线（黄金螺旋线）
斐波那契螺旋线也称"黄金螺旋线".观察图形后可以发现:正方形按顺或逆单一时针方向滚动顶点.并按黄金分割比例缩小,按此规律循环5次,顶点滚动路径对应的曲线(以正方形边长为半径r的扇形 ...
用python绘制斐波那契螺旋线
用python绘制斐波那契螺旋线 cd 啥是斐波那契数列斐波那契数列(Fibonacci sequence),名字版本有很多,黄金分割数列.兔子数列-但指的是都是这样一个数列: 0 . 1 . 1 ...
使用canvas 绘制一个有限度的斐波那契数列的曲线
昨天看到"前端面试中的常见的算法问题"的一篇文章,感觉有点挑战,所以才要实现使用canvas 绘制一个有限度的斐波那契数列的曲线,刚开始真是想破脑袋也实现不了,被下图中交接的线条搞 ...
画彩色斐波那契螺旋线
前言下面我会教你如画彩色斐波那契螺旋线一.初始设置学过python的肯定知道,我不教了,自行制作. 二.列表代码 0.创建函数 def draw_fibonacci(x): 1.创建列表 f_l ...
用JS画斐波那契螺旋线（黄金螺旋线）
偶然看到斐波那契螺旋线(黄金螺旋线)的定义及画图方法,试着用JS画了一下,很漂亮,很好玩具体定义及画法大家查一下就有了,很简单. 以下是代码: <!DOCTYPE html> <h ...
python斐波那契螺旋线怎么画向日葵心,【脑洞题】飞蛾扑火曲线—— 斐波那契螺旋线...
本帖最后由 sunemy 于 2017-12-3 22:56 编辑此题源于最近看到的一篇文章,非喜直接看题目即可: [脑洞题]飞蛾扑火曲线:做递增角度为5度,长度为100的辐射线,覆盖360度,然后 ...
python斐波那契螺旋线怎么画向日葵心_斐波那契螺旋线的图形作法
展开全部斐波那契螺旋线,62616964757a686964616fe59b9ee7ad9431333365643662以斐波那契数为边的正方形拼成的长方形,然后在正方形里面画一个90度的扇形,连起 ...
一日一美女：告诉你什么是斐波那契螺旋线
上图的水花就是斐波那契螺旋线,以斐波那契数为边的正方形拼成的长方形,然后在正方形里面画一个 90 度的扇形,连起来的弧线就是斐波那契螺旋线.鹦鹉螺身上也包含斐波那契螺旋线.关于斐波那契数,还可以参考科 ...
python斐波那契螺旋线怎么画向日葵心_“斐波那契螺旋线”的图形作法是什么？...
展开全部斐波那契螺旋线,以斐波那契数为边的正方形32313133353236313431303231363533e78988e69d8331333363396364拼成的长方形,然后在正方形里面画一 ...

使用canvas 绘制斐波那契螺旋线（斐波那契数列的应用）

使用canvas 绘制斐波那契螺旋线（斐波那契数列的应用）相关推荐

最新文章

热门文章