<!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. idea使用教程-模板的使用

    一.代码模板是什么 它的原理就是配置一些常用代码字母缩写,在输入简写时可以出现你预定义的固定模式的代码,使得开发效率大大提高,同时也可以增加个性化.最简单的例子就是在Java中输入sout会出现Sys ...

  2. C++单元测试框架gtest使用

    作用 作为代码编码人员,写完代码,不仅要保证编译通过和运行,还要保证逻辑尽量正确.单元测试是对软件可测试最小单元的检查和校验.单元测试与其他测试不同,单元测试可看作是编码工作的一部分,应该由程序员完成 ...

  3. [opencv]白平衡算法中的灰度世界法,改善图像发红发蓝发绿的现象

    #include<iostream> #include <opencv2/opencv.hpp> #include <math.h> using namespace ...

  4. 使用 JavaScript自定义函数计算出教室的体积大小，其中教室的长、宽、高分别为 8 米、5 米、3 米

    查看本章节 查看作业目录 需求说明: 使用 JavaScript自定义函数计算出教室的体积大小,其中教室的长.宽.高分别为 8 米.5 米.3 米 实现思路: 创建 HTML 页面 在页面的 < ...

  5. MySQL数据库基础（2）表结构管理

    目录 一.关系模型与数据表 二.MySQL数据类型 三.数据完整性约束 四.参照完整性约束 一.关系模型与数据表 概念 ①关系模型:是由若干个关系模式组成的集合,关系模式的实例称为关系,每个关系实际上 ...

  6. python与redis交互（4）

    python可以使用redis模块来跟redis交互 redis模块的使用 安装模块: pip3 install redis 导入模块:import redis 连接方式 严格连接模式:r=redis ...

  7. react中使用charles实现本地数据mock

    首先下载charles软件地址,更详细的使用方法都包含在操作文档里,包含汉化版补丁(下载后查看) 链接:https://pan.baidu.com/s/1Q5rMbcX0Wus7AwdGUWa-Wg ...

  8. Go语言读取各种配置文件

    配置文件结构体 config.go package config type System struct { Mode string `mapstructure:"mode" jso ...

  9. 简述伪共享和缓存一致性MESI

    什么是伪共享 计算机系统中为了解决主内存与CPU运行速度的差距,在CPU与主内存之间添加了一级或者多级高速缓冲存储器(Cache),这个Cache一般是集成到CPU内部的,所以也叫 CPU Cache ...

  10. 解读与部署（三）：基于 Kubernetes 的微服务部署即代码

    在基于 Kubernetes 的基础设施即代码一文中,我概要地介绍了基于 Kubernetes 的 .NET Core 微服务和 CI/CD 动手实践工作坊使用的基础设施是如何使用代码描述的,以及它的 ...