<!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. sofaBoot

    SOFABoot 和 SOFARPC 都是蚂蚁金服开源的 SOFA 技术栈的开源项目,SOFARPC 只是其 SOFA 技术栈体系(SOFAStack)中的一个 RPC 框架. SOFABoot 也是 ...

  2. Ubuntu mininet+Ryu环境安装

    我们使用下载Ryu源代码进行那个安装 Ryu官方文档:http://ryu.readthedocs.io/en/latest/ Ryu电子书:http://osrg.github.io/ryu/res ...

  3. Color Models (RGB, CMY, HSI)

    目录 概 定义 RGB CMY CMYK HSI 相互的转换 RGB <=> CMY CMY <=> CMYK CMY > CMYK CMYK > CMY RGB ...

  4. 求最大公因数和最小公倍数（C++实现）

    求两个正整数之最大公因子的算法(辗转相除法) 最大公约数是指能同时整除它们的最大正整数 基本原理:两个数的最大公约数等于它们中较小的数和两数之差的最大公约数. 就如有 a = 122, b =  54 ...

  5. CS5211|CS5211参数|eDP转LVDS转换器芯片

    CS5211概述 CS5211是一个eDP到LVDS转换器,配置灵活,适用于低成本显示系统.CS5211与eDP 1.2兼容,支持1车道和2车道模式,每车道速度为1.62Gbps和2.7Gbps.CS ...

  6. Pycharm的界面修改与基本设置

    Pycharm的一些基本设置 设置字体大小与字体样式 首先我们打开Pycharm,点击左上角File,找到sitting 点击后就能进入设置界面 xdm,我将介绍两种更改字体的设置 方法一 设置界面找 ...

  7. js 使用 substr 和substring 的区别记录

    根据 提示,已经很清楚区别了 区别都是第二个参数 ,substr 是长度 ,而substring 仍是索引数

  8. dnspython模块报错 AttributeError: 'CNAME' object has no attribute 'address'

    有时候用到这个模块的时候会报错 AttributeError: 'CNAME' object has no attribute 'address' 如下所示 [root@ansible ch01]# ...

  9. linux 设置root 密码

    指令意思: sudo -i  是 切换到root权限 ,如果没有密码,则直接可以操作,有密码则会要求输入密码 sudo passwd root  是修改密码指令 ,回车后 提示输入新密码 新密码需要输 ...

  10. 【Java】代码块

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