Question

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

for(var i = 0; i< savedMove.length; i++){
    doSetTimeout(i);
}

function doSetTimeout(i) {
    setInterval(function() { animate(savedMove[i][0], savedMove[i][1]); }, 100);
}
function animate(xPos, yPos) {
    context.fillStyle = "red";
    context.fillRect(xPos, yPos, 5, 5);
}

我将每个x和y位置移动到2D数组（savedMove）内部，我想用延迟的数组信息绘制。但Canvas并没有画出这个。我一直在调试，但我无法弄清楚问题。

Answer 1

您将savedMove.length计时器设置为每100毫秒并行打勾。我很确定这不是你想要的，虽然很难猜到它是什么。首先，我将setInterval更改为setTimeout，并使它们在不同的时间点火，彼此间隔100毫秒：

function doSetTimeout(i) {
    setTimeout(function() { animate(savedMove[i][0], savedMove[i][1]); }, 100 * i);
}

请注意，这不是最好的方法，但肯定比原始代码更好。

然后你可以调试它，因为你可能会从可见画布中抽出：

console.log("canvas size:", document.getElementById("canvas").width, document.getElementById("canvas").height);

function animate(xPos, yPos) {
    context.fillStyle = "red";
    context.fillRect(xPos, yPos, 5, 5);
    console.log("animate:", xPos, yPos);
}

如何使用带有延迟的for循环绘制Canvas？

1 个答案: