• 用JS画斐波那契螺旋线(黄金螺旋线)


    偶然看到斐波那契螺旋线(黄金螺旋线)的定义及画图方法,试着用JS画了一下,很漂亮,很好玩

    具体定义及画法大家查一下就有了,很简单。

    以下是代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>FibonacciSequence</title>
    </head>
    <body>
    <canvas id="myCanvas" width="1000" height="800" style="background-color:#ddd;"></canvas>
    
    <input type="text" onchange="draw_many(parseInt(this.value))" />
    
    <script type="text/javascript">
    
    var canvas=document.getElementById('myCanvas');
    var ctx=canvas.getContext('2d');
    
    //优化的斐波那契数列计算,把数列结果用数组保存
    //用传统递归太慢了太费内存了
    var fib_val = [0,1]
    function fib (n) {
        var len = fib_val.length;
        for(var i=len; i<=n; i++){
            fib_val.push( fib_val[i-1] + fib_val[i-2] )
        }
        return fib_val[n] 
    }
    
    //画斐波那契螺旋线(黄金螺旋线)
    //n表示计算数列到多少
    function draw (n) {
        for (var i = 1; i < n; i++) {
            var len = fib(i);    
            //ctx.strokeRect(0,0,len,len)//画矩形的,可以看到产生的原理
            //画扇形
            ctx.beginPath();
            ctx.arc(len,0,len,Math.PI/2,2*Math.PI/2);
            ctx.stroke();
    
            //把原点移到原来原点的对角线上,然后旋转270度
            //这样画起来简单
            ctx.translate(len, len)
            ctx.rotate(3*Math.PI/2);
        };
    }
    
    //画好多条螺旋线,漂亮
    function draw_many (n) {
        var total = n
        //清除画布
        ctx.clearRect(0,0,800,800);
        for(var i=0;i<total;i++){
            //保存状态,这样好恢复原点之类的状态
            ctx.save();    
            //中心移到画布中间
            ctx.translate(400,400);
            //画一条旋转一点
            ctx.rotate(360/total*i*Math.PI/180);
            draw(15);
            //恢复状态
            ctx.restore();
        }
    }
    
    //画180条线,很漂亮 
    draw_many(180)
    
    </script>    
    </body>
    </html>

    下面是效果,试着改一下画的数量看,按回车看效果

    输入要画线的数量:
     
  • 相关阅读:
    Java中static、final、static final的区别(转)
    常见 重要知识精简总结
    面向对象编程三大特性------封装、继承、多态
    解决点击输入框调起键盘时,输入框被键盘遮挡的问题
    实用连接
    媒体查询兼容IE浏览器
    拖动到回收站删除
    vue2.0--组件通信
    图片上传
    上传图片预览
  • 原文地址:https://www.cnblogs.com/varlxj/p/draw_FibonacciSequence.html
Copyright © 2020-2023  润新知