如何绘制使用for循环延迟的画布？

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位置在二维数组（movingMove）内移动，我想用延迟绘制数组信息。但画布不画这个。我继续调试，但我无法弄清楚问题所在。如何绘制使用for循环延迟的画布？

来源

2016-01-21 Haroldy

你去哪里定义'savedMove'阵列？只是检查它是否可用之前，你用它for循环。我尝试了你的代码，当我用dummy项定义'savedMove'数组时，它确实在画布上绘制了（尽管如此，并没有延迟，正如Gavriel所解释的那样）。 –

在这里，我写的颜色是红色的，但在我的代码中，功能改变颜色。我意识到默认颜色是白色的。难怪我看不到图片....感谢您的帮助 – Haroldy

您正在设置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); 
}

来源

2016-01-21 01:25:57 Gavriel

如何绘制使用for循环延迟的画布？

回答

相关问题