如何解决希望html / js画布在每次循环时都进行更新
我是js编码的新手,但找不到我的问题的任何答案。我正在使用html中的标记,并尝试获取我的JS代码以在需要时重画画布。我尝试使用一个简单的while循环来执行此操作,但这只是通过while循环,然后绘制最终结果,而没有显示其间的更新。我当前的代码(下面使用的是setTimeout / clearTimeout调用,但是会产生相同的结果。不确定是否可行。也许这就是我更新画布的方式?
这是我的代码,用于调用函数以更新我要存储数据的数组,然后更新画布。
var done = false;
var count = 0;
while (!done) {
timer = setTimeout(updateGrid(grid),500);
clearTimeout(timer);
done = stop(count,allDone);
count++;
}
我用来在画布上绘制的功能:
context = canvas.getContext("2d");
context.fillStyle = color;
context.fillRect(x,y,w,h);
有什么我想念的吗?
解决方法
clearTimeout使您的updateGrid超时无效。
我认为您想要使用setInterval代替。但是您也可以使用setTimeout并调整超时时间(500 *(i + 1)或类似的值),然后设置所有超时时间
while (!done) {
timer = setTimeout(updateGrid(grid),500);
clearTimeout(timer); //this is nullifying the line above
done = stop(count,allDone);
count++;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。