我想做以下事情:
我正在通过for循环运行,每次获取新信息并希望在画布上绘制它。
问题是画布在循环结束后才被绘制,我看不到任何动画。如果我使用debug或警告消息进行调试,它会立即绘制到画布上。该怎么办?
这是我的代码,您可以看到我已经尝试了多种方式使用setTimeout,但没有用。
绘制方法:
for(var i=0;i<1000; i ++)
{
addLines(ga.getBestCreature()); // This method draw on the canvas
setTimeout(function() {
ga.startEvolution(1); // This method change the best creature
}, 10);
}
绘制方法:
function addLines(best) {
if(!best) {
return;
}
var global_path = best.data;
redraw(); // Clear off the canvas
var cityA;
var cityB;
for (var i = 0; i < (global_path.length - 1); i++) {
cityA = ga.cities[global_path[i]];
cityB = ga.cities[global_path[i+1]];
ctx.moveTo(cityA.x,cityA.y);
ctx.lineTo(cityB.x,cityB.y);
ctx.stroke();
}
}
有什么想法吗?
更新:在被建议使用requestAnimationFrame之后,我想出了以下的方法。这是最好的方法吗? 我在点击事件中更新了一个名为“run”的全局变量。
var run = 0;
function animate() {
if(run > 0) {
ga.startEvolution(1);
run--;
}
addLines(ga.getBestCreature());
requestAnimationFrame(animate);
}
animate();