<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="content-type" content="text/html" />

        <meta name="keywords" content="不用临时变量进行两个值的变换" />

        <meta name="description" content="不使用临时变量进行两值的变换" />

        <meta name="author" content="KG" />

        <title>不是用临时变量，进行两个值的交换</title>

        <link rel="shortcut icon" href="favicon.icon" />

    </head>

    <body>

        <canvas></canvas>

        <script>

            // 不用临时变量进行两个值的变换

            function swap(a, b) {

                a = a + b;

                b = a - b;

                a = a - b;

                console.log(a, b)

            }

            swap(4, 5);

            // 斐波那契数列的获取，长度为11个；

            function fiboArr(len) {

                let fiboArr = [];

                for (var i = 0; i < len; i++) {

                    if (i <= 1) {

                        fiboArr.push(i);

                    } else {

                        fiboArr.push(fiboArr[i - 1] + fiboArr[i - 2]);

                    }

                }

                return fiboArr;

            }

            console.log(fiboArr(11));

            // 斐波那契曲线

            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 这是斐波那契数列当前下标的值，也就是将画曲线的半径

            */

           /*圆心变化规律

           ctx.arc(300, 240, 5, Math.PI, 0.5 * Math.PI, true);//1

           ctx.arc(300, 235, 10, Math.PI * 0.5, 0, true);//2

           ctx.arc(295, 235, 15, 0, Math.PI * 1.5, true);//3

           ctx.arc(295, 245, 25, Math.PI * 1.5, Math.PI, true);//4

           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);

           */

            function draw(prevR, n, r) {

                let radius = r * 5

                //五倍半径画，不然太小了

                let startAngle = Math.PI

                let endAngle = Math.PI * 0.5

                //每个半径只画1/4个圆，所以开始角度和结束角度刚好相差 1/4 * PI

                let anticlockwise = true

                //设置为逆时针方向画

                //改变圆点坐标、开始角度和结束角度

                //第三个元素的圆点坐标、开始角度和结束角度上面已经给出，所以从第四个元素开始改变圆点坐标、开始角度和结束角度，也就是从n > 2开始

                if (n > 2) {

                    //下面坐标的改变可以参考上面的图和直接用canvas画的代码。

                    switch (n % 4) {

                        case 0:

                            coor.x = coor.x + (5 * prevR) - radius

                            startAngle = 0

                            endAngle = Math.PI * 1.5

                            break;

                        case 1:

                            coor.y = coor.y - (5 * prevR) + radius

                            startAngle = Math.PI * 1.5

                            endAngle = Math.PI

                            break;

                        case 2:

                            coor.x = coor.x - (5 * prevR) + radius

                            startAngle = Math.PI

                            endAngle = Math.PI * 0.5

                            break;

                        case 3:

                            coor.y = coor.y + (5 * prevR) - radius

                            startAngle = Math.PI * 0.5

                            endAngle = 0

                            break;

                    }

                }

                ctx.beginPath();

                ctx.arc(coor.x, coor.y, radius, startAngle, endAngle, anticlockwise);

                ctx.lineWidth = 1;

                ctx.strokeStyle = '#000';

                ctx.stroke();

            }

            //获取斐波那契数列

            function getFibonacci(n) {

                let arr = []

                let i = 0

                while (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])

                }

            }

        </script>

    </body>

</html>

js 斐波那契数列的获取和曲线的实现（每日一更）的更多相关文章

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

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

  2. js斐波那契数列

    斐波那契数列指的是这样一个数列 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89...... 这个数列从第3项开始,每一项都等于前两项之和. 1.递归算法: function ...

  3. 斐波那契数列中获取第n个数据值

    class Fibonacci { /** * Description:迭代方法获取fibonacci第n项数值 * * @param int $n * @return int */ public s ...

  4. js斐波那契数列求和

    一.递归算法  function recurFib(n) {   if (n < 2) {     return n;   }   else {     return recurFib(n-1) ...

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

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

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

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

  7. js算法集合（二） javascript实现斐波那契数列 （兔子数列）

    js算法集合(二)  斐波那契数列 ★ 上一次我跟大家分享一下做水仙花数的算法的思路,并对其扩展到自幂数的算法,这次,我们来对斐波那契数列进行研究,来加深对循环的理解.     Javascript实 ...

  8. Tips_of_JS 之 利用JS实现水仙花数的寻找与实现斐波那契数列

    一.水仙花数 1.啥是水仙花数? 水仙花数是指一个 n 位正整数 ( n≥3 ),它的每个位上的数字的 n 次幂之和等于它本身.(例如:1^3 + 5^3+ 3^3 = 153) 2.利用JS实现对水 ...

  9. 太原面经分享：如何用js实现返回斐波那契数列的第n个值的函数

    面试攒经验,let's go! 值此高考来临之际,闲不住的我又双叒叕出发去面试攒经验了,去了公司交待一番流程后,面试官甩给了我一张A4纸,上面写着一道js算法笔试题(一开始我并不知道这是在考察js算法 ...

随机推荐

  1. Sky Code(poj3904)

    Sky Code Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2085   Accepted: 665 Descripti ...

  2. 基于Spring MVC + Spring + MyBatis的【银行卡系统】

    资源下载:https://download.csdn.net/download/weixin_44893902/45604256 练习点设计: 删除.新增 一.语言和环境 实现语言:JAVA语言. 环 ...

  3. 【HTML基础习题】HTML5+CSS3做问卷星登录页面

    源代码下载地址:https://download.csdn.net/download/weixin_44893902/12839539 码云仓库地址: https://gitee.com/ynavc/ ...

  4. Git创建本地仓库

    使用Git创建本地仓库, 可以记录文本文件变化, 这里以自己的文章为例, 利用TortoiseGit工具创建一个本地Git仓库. 1. 切换到需要创建仓库的目录下, 比如:D:\MyDoc\Devel ...

  5. Swoole 中使用 Table 内存表实现进程间共享数据

    背景 在多进程模式下进程之间的内存是相互隔离的,在一个工作进程中的全局变量和超全局变量,在另一个工作进程中是无法读取和操作的. 如果只有一个工作进程,则不存在进程隔离问题,可以使用全局变量和超全局变量 ...

  6. Flask_响应（四）

    响应即视图函数的返回值,前面的例子的返回值都很简单,直接返回值.但是Flask Http协议的返回值中通常还会有以下几种不同的方式. 一.return元组 通过return一个元组构造响应信息. 语法 ...

  7. concat模糊查询

    <if test="name!=null"> name like concat('%',concat(#{name},'%')) </if> choose ...

  8. SpringBoot2.4.2下配置Lettuce使用Redis

    1. Springboot2.4.2下对Redis的基础集成 1.1 maven添加依赖 <dependency> <groupId>org.springframework.b ...

  9. 【Java】代码块

    代码块 代码块的作用:用来初始化类.对象 代码块如果有修饰的话,只能使用static 分类:静态代码块.非静态代码块 静态代码块 static{ } 内部可以有输出语句 随着类的加载而执行,而且只执行 ...

  10. zip方式安装MySQL提示找不到 MSVCP120.dll的解决方法

    电脑重装系统后,用zip的方式安装MySQL,在执行mysqld --initialize的时候提示 由于找不到 MSVCP120.dll,无法继续执行代码.重新安装程序可能会解决此问题. 解决的方法 ...