我目前正在尝试使用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;
}
}
答案 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++;
}
}