Javascript 阻止 HTML 在 canvas 上绘图

Question

欢迎，我在 <canvas> 上绘图时遇到问题，而 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 改变任何东西，但我不知道如何解决这个问题。

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

Answer 1

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

function foo() {

 //code

}

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

function foo() {

 //code

 setTimeout(foo, 50)
}

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

Javascript 阻止 HTML 在 canvas 上绘图

Javascript blocking HTML from drawing on canvas

javascript

canvas

html5-canvas