<!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. 基于MCRA-OMLSA的语音降噪(二)：实现

    上篇文章(基于MCRA-OMLSA的语音降噪(一):原理)讲了基于MCRA-OMLSA降噪的原理,本篇讲怎么做软件实现.软件实现有多种方式.单纯看降噪效果可用python,因为python有丰富的库可 ...

  2. 【计组】《计算机组成与体系结构性能设计》William Stallings 第2部分 计算机系统 第3章 计算机功能和互连的顶层视图

    关键词 address bus 地址总线 asynchronous timing 异步时序 bus 总线 bus arbitration 总线仲裁 bus width 总线宽度 centralized ...

  3. 如何基于LSM-tree架构实现一写多读

    一  前言 PolarDB是阿里巴巴自研的新一代云原生关系型数据库,在存储计算分离架构下,利用了软硬件结合的优势,为用户提供具备极致弹性.海量存储.高性能.低成本的数据库服务.X-Engine是阿里巴 ...

  4. Java EE数据持久化框架 • 【第2章 MyBatis实现DML操作】

    全部章节   >>>> 本章目录 2.1 标签 2.1.1 标签简单应用 2.1.2 使用JDBC方式返回主键自增的值 2.1.3 使用标签返回普通主键的值 2.1.4 实践练 ...

  5. 编写Java程序，将JButton按钮按网格布局管理器格式放置

    返回本章节 返回作业目录 需求说明: 将JButton按钮按网格布局管理器格式放置 实现思路: 实现代码: public void init(){ setLayout(new GridLayout(4 ...

  6. XML解析的四种方式

    1.说明 XML是EXtensible Markup Language, 即可扩展标记语言, 是一种通用的数据交换格式, 它的平台无关性.语言无关性.系统无关性, 给数据集成与交互带来了极大的方便. ...

  7. ActiveMQ基础教程（一）：认识ActiveMQ

    ActiveMQ是Apache软件基金会所研发开源的消息中间件,为应用程序提供高效的.可扩展的.稳定的和安全的企业级消息通信. 现在的消息队列有不少,RabbitMQ.Kafka.RocketMQ,Z ...

  8. mysql 的 if 和 SQL server 的 iif

    在sql语句中,mysql 使用 if 而SQL server 使用iif 如 mysql : SELECT IF(1<2,'yes ','no'); sql server: SELECT II ...

  9. Oracle 报 ORA-00054资源正忙的解决办法

    oracle之报错:ORA-00054: 资源正忙,要求指定 NOWAIT 问题如下: SQL> conn scott/tiger@vm_database Connected to Oracle ...

  10. ch01系统基础信息模块详解

    第1章 系统基础信息模块详解 1.1 系统性能信息模块 psutil 解决VMWare在Windows10的安装问题: 安装VC Redistributable 2017 解决虚拟机的上网问题:修改V ...