Javascript 阻止 HTML 在画布上绘图答案

【问题标题】：Javascript blocking HTML from drawing on canvasJavascript 阻止 HTML 在画布上绘图
【发布时间】：2021-06-04 01:22:34
【问题描述】：

欢迎，我在<canvas> 上绘图时遇到问题，而在所述画布上绘图的函数在循环内。

使用以下代码：

do {

    // ... code ...

    // drawing
    ctx.clearRect(0, 0, 400, 400);
    ctx.beginPath();    

    for (let i = 0; i < points.length; i++) {
        for (let target = 1; target <= 4; target++) {
            if (i + target >= points.length) {
                continue;
            };
            ctx.moveTo(points[i][0], points[i][1]);
            ctx.lineTo(points[i+target][0], points[i+target][1]);
            ctx.stroke();
        }
    }

    do {
        var tEnd = performance.now();
        sleep(10);
    } while (tEnd - tStart < 25);

} while (1);

在这个例子中，代码不能工作仅仅因为do-while(1)，当使用do-while(0)时，代码运行一次，就可以正常工作。我知道问题是 Javascript 没有让 HTML 改变任何东西，但我不知道如何解决这个问题。

注意：有一个类似的问题，它没有解决我的问题问题，
干杯

【问题讨论】：

不要使用 do...while 循环，除非您的 while 条件中断了循环。

标签： javascript canvas html5-canvas

【解决方案1】：

我用函数定义替换了while(1)：

function foo() {

 //code

}

在函数结束时，我调用了setTimeout(foo, 50)。这解决了问题：

function foo() {

 //code

 setTimeout(foo, 50)
}

使用这个，函数在每次迭代 +50ms 时循环一次。通过测量函数使用的时间，我可以在多台计算机上标准化函数的 fps，并将超时设置为尽可能低。

【讨论】：