斐波那契序列动画

斐波那契序列动画,第1张

我目前正在尝试使用JavaScript在HTML5画布上编写Fibonacci Sequence动画。

我计算了Fibonacci数,并且能够将方块添加到网格布局中。我遇到的麻烦是能够计算偏移量,以便它们能够自动并排放置。有没有人知道如何实现这一目标。

这是我的JavaScript代码:

var canvas;
var context;

function init(){

    canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');

    drawgrid();
    drawlines();

}


function drawgrid(){

    context.strokeStyle="LightGrey";

    for(var i = 0; i < 600; i =20){

        context.beginPath();
        context.moveTo(i, 0);
        context.lineTo(i, 600);
        context.stroke();

        context.beginPath();
        context.moveTo(0, i);
        context.lineTo(600, i);
        context.stroke();

    }

}

function drawlines(){

    context.strokeStyle="blue";
    var startLeft = (canvas.width / 2) - 20;
    var startTop = (canvas.height / 2) - 20;

    var first = 1;
    var second = 1;
    var next = 0;
    var c = 0;
    var count = 0;

    for (var i = 0; i < 5; i  ){

        if ( c <= 1 ){

            next = 1;

        }else{

            next = first   second;
            first = second;
            second = next;

        }

        c  ;
        next *= 20;


        //This is a minor attempt at offsetting which does not work what so ever
        switch(count) {
            case 1:
                startLeft  = next;
                break;
            case 2:
                startTop-=next;
                break;
            case 3:
                startTop -= next - 20;
                startLeft -= next;
                break;
            case 4:
                startTop  = next - 80;
                startLeft  = next - 160;
                break;
        }

        context.beginPath();
        context.rect(startLeft,startTop,next,next);
        context.stroke();

        count  ;

        if (count > 4){

            count = 1;

        }

        startLeft = (canvas.width / 2) - 20;
        startTop = (canvas.height / 2) - 20;

    }

}

JSFiddle:http://jsfiddle.net/schoolboytom/73prkp8L/

最佳答案:

1 个答案:

答案 0 :(得分:1)

一种方法是始终跟踪所有坐标,并根据放置的下一个方格的方向增加。我认为你的整个结构还可以,但是缺少一些信息,主要是保持底部和右边的坐标。

这样的事情似乎有效(我已经将增量10加入以确定逻辑是否正常,但它应该适用于任何一个):

function drawlines() {

    context.strokeStyle = "blue";
    var curLeft = (canvas.width / 2) - 10;
    var curTop = (canvas.height / 2) - 10;
    //You add right and bottom position to help calculate positioning later.
    var curRight = curLeft   10;
    var curBottom = curTop   10;

    var first = 0;
    var second = 1;
    var next = 10;
    var c = 0;
    //You draw the first square out of the loop cause it's conditions are
    //not exactly the same, meaning its positioning is not dependent on previous square
    context.beginPath();
    context.rect(curLeft, curTop, next, next);
    context.stroke();

    for (var i = 1; i <= 9; i  ) {

        next = first   second;
        first = second;
        second = next;

        next *= 10;
        //changed this to fetch if square should be added right, top, left or bottom
        count = i % 4

        //You switch depending on where you're at. Each direction has its increment pattern.
        //For example to add right you keep bottom, but get current right to get left positioning
        //and you increment top depending on next value. The structure is 
        //similar to yours but since you now have right and bottom it's 
        //easier to place each square correctly
        switch (count) {
            case 0:

                curRight = curLeft   next
                curLeft = curLeft
                curTop = curBottom
                curBottom = curBottom   next

                break;
            case 1:
                curLeft = curRight
                curRight = curRight   next
                curTop = curBottom - next
                curBottom = curBottom

                break;

            case 2:
                curLeft = curRight - next
                curRight = curRight
                curBottom = curTop
                curTop = curBottom - next
                break;
            case 3:
                curRight = curLeft
                curLeft = curLeft - next
                curBottom = curTop   next
                curTop = curTop
                break;
        }
       // the rest is pretty much the same
        context.beginPath();
        context.rect(curLeft, curTop, next, next);
        context.stroke();

        count  ;

    }

}

请参阅小提琴:http://jsfiddle.net/a0aLg6Ly/3/

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复