希望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++;
}

html5-canvas javascript