javascript - 斐波那契数列动画

Question

我目前正在尝试使用 JavaScript 在 HTML5 Canvas 上编写斐波那契数列动画。

我已经计算了斐波那契数列，并且能够将正方形添加到网格布局中。我遇到的麻烦是能够计算偏移量，这样它们就会自动很好地并排组合在一起。有谁知道如何实现这一点。

这是我的 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/

Answer 1

一种方法是始终跟踪所有坐标，并根据要放置的后续方 block 的方向进行增量。我认为你的整个结构是好的，但是缺少一些信息，主要是保留底部和右侧的坐标。

这样的东西似乎可以工作(我已经添加了 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++;

    }

}

参见 fiddle :http://jsfiddle.net/a0aLg6Ly/3/