[英]How to render HTML5 canvas within a loop
我正在做以下事情:
我正在运行一个for循环,每次我得到一个新的信息,并希望在画布上绘制它。 问题是画布是在循环结束后绘制的,我看不到没有动画。 如果我介入调试或使用警报消息,它将立即绘制到画布。 我该怎么做?
这是我的代码,你可以看到我已经尝试过多种方式的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之后,我发布了类似的东西。 这是最好的approuch吗? 我正在更新一个名为'run'的全局变量,点击事件
var run = 0;
function animate() {
if(run > 0) {
ga.startEvolution(1);
run--;
}
addLines(ga.getBestCreature());
requestAnimationFrame(animate);
}
animate();
您可以查看requestAnimationFrame
: https : //developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
而我们这样的事情:
function loop() {
addLines(ga.getBestCreature());
// execute loop function over and over
requestAnimationFrame(loop);
}
最好的方法是分开关注点:让动画循环持续运行,并且“每次[你]获得新信息”,更新你的场景描述,它会在显示准备就绪后立即绘制。
所以第一个非常简单的演示:这里的'新信息'是用户点击。
var cv = document.getElementById('cv'); var ctx = cv.getContext('2d'); var cvWidth = cv.width; var cvHeight = cv.height; // Simple scene description : an array of colored rects var everyObject = [ [60, 70, 30, 30, 'yellow'] ]; // animation : always running loop. function animate() { // call again next time we can draw requestAnimationFrame(animate); // clear canvas ctx.clearRect(0, 0, cvWidth, cvHeight); // draw everything everyObject.forEach(function(o) { ctx.fillStyle = o[4]; ctx.fillRect(o[0], o[1], o[2], o[3]); }); // ctx.fillStyle = '#000'; ctx.fillText('click to add random rects', 10, 10); } animate(); // click handler to add random rects window.addEventListener('click', function() { addRandRect(); }); function addRandRect() { var randColor = Math.random() > 0.5 ? 'blue' : 'red'; everyObject.push([Math.random() * cvWidth, Math.random() * cvHeight, 10 + Math.random() * 40, 10 + Math.random() * 40, randColor]); }
<canvas id='cv' width=400 height=200></canvas>
现在,如果你想要某种动画,或者使用setTimeOut的简单版本是:
var cv = document.getElementById('cv'); var ctx = cv.getContext('2d'); var cvWidth = cv.width; var cvHeight = cv.height; // Simple scene description : an array of colored rects var everyObject = [ [60, 70, 30, 30, 'yellow'] ]; // animation : always running loop. function animate() { // call again next time we can draw requestAnimationFrame(animate); // clear canvas ctx.clearRect(0, 0, cvWidth, cvHeight); // draw everything everyObject.forEach(function(o) { ctx.fillStyle = o[4]; ctx.fillRect(o[0], o[1], o[2], o[3]); }); // ctx.fillStyle = '#000'; ctx.fillText('click to add 4 random rects with a delay', 10, 10); } animate(); // click handler to add random rects window.addEventListener('click', function() { addRandRect(); setTimeout(addRandRect, 300); setTimeout(addRandRect, 600); setTimeout(addRandRect, 900); }); function addRandRect() { var randColor = Math.random() > 0.5 ? 'blue' : 'red'; everyObject.push([Math.random() * cvWidth, Math.random() * cvHeight, 10 + Math.random() * 40, 10 + Math.random() * 40, randColor]); }
<canvas id='cv' width=400 height=200></canvas>
(顺便说一下,如果感兴趣,我在这里写了关于动画的文章: http : //codepen.io/gamealchemist/post/animationcanvas1 )
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.