<!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. 第九个知识点：香农(Shannon)定义的熵和信息是什么?

    第九个知识点:香农(Shannon)定义的熵和信息是什么 这是计算机理论的最后一篇.我们讨论信息理论的基础概念,什么是香农定义的熵和信息. 信息论在1948年被Claude E.Shannon建立.信 ...

  2. Jmeter环境变量配置你不得不知道的事情

    在安装Jmeter的过程中大家肯定需要配置环境,但是为什么要配置JDK的环境变量呢?大家有没有好奇过,有没有仔细去像一下呢,其实在安装Jmeter前,大家应该都知道Jmeter是我们JAVA开发的,J ...

  3. vue项目报错如下：(Emitted value instead of an instance of Error)

    (Emitted value instead of an instance of Error) the "scope" attribute for scoped slots hav ...

  4. TCP KeepAlive机制理解与实践小结

    0 前言 本文将主要通过抓包并查看报文的方式学习TCP KeepAlive机制,以此加深理解. 1 TCP KeepAlive机制简介 TCP长连接下,客户端和服务器若长时间无数据交互情况下,若一方出 ...

  5. 在pycharm中创建py文件——创建你的第一个项目

    开启编程第一步   创建一个项目 创建项目了xdm,敲黑板了哈 首先打开你的pycharm,点击New Project新建项目 就会进入到配置你这个项目所要用到的环境,这里我们用python列举 在L ...

  6. java -jar 指定logback.xml、application.yaml

    java -jar 指定logback.xml -Dlogging.config="C:\logbacs\logback.xml" 示例:java -jar   -Dlogging ...

  7. 《selenium2 python自动化测试》（高清）.PDF，免费无需任何解压密码

    链接:https://pan.baidu.com/s/1eAI0mXvJeblBn2Tn9WClEA 提取码:7m5u

  8. shell 之 循环执行某操作

    需求: 按月执行201904到202010的py脚本. 代码如下: #!/bin/bash i=201904 # 定义开始月份 while [ $i -le 202010 ] # 当i小于等于2020 ...

  9. yum是什么？repo文件详解，epel简介，yum源的更换，repo和epel区别

    yum是什么?repo文件详解,epel简介,yum源的更换,repo和epel区别 简单概括: repo和epel的关系 repo是配置源的,即配置从哪里下载包(以及依赖关系)的. epel是作为桥 ...

  10. Jquery通过遍历数组给checkbox赋默认值

    需求:有一个数组:(北京菜,粤菜),checkbox如下: 现在想通过遍历这个数组,使数组里包含的值,在checkbox选中 代码: var flavors = new Array([北京菜 , 粤菜 ...