Javascript 立即显示对HTML5画布的更改

我正在使用HTML5画布制作这个墙纸生成器。（）
它使用追踪曲线生成模式。
我希望生成过程具有动画效果，并且对用户可见。
这些线是在for循环上绘制的，但它们仅在循环结束时显示在末尾（可以在提供的链接中看到）。为什么会发生这种情况

魔术发生在一个for循环中，我重复这样画线：

for (let i=0; i < comp; ++i) {
    ctx.beginPath();
    ctx.strokeStyle = // something          
    ctx.moveTo( // somewhere );
    ctx.lineTo( // somewhere ) ;    
    ctx.lineWidth = // something
    ctx.stroke();
    ctx.closePath();
}

for（设i=0；i

---

我尝试通过

setTimeout（）

在每个帧之间添加延迟，但没有任何帮助。

Javascript异步运行。

for

循环首先执行，然后在循环执行结束时查找i值，即comp，然后输出

setTimeOut

comp次，每次循环迭代一次。您将始终只看到最后一次执行的结果。您可以尝试以下方法，而不是使用for循环和setTimeOut：

var maxlimit = 0;

function redrawCanvas() {
    ctx.beginPath();
    ctx.strokeStyle = // something          
    ctx.moveTo( // somewhere );
    ctx.lineTo( // somewhere ) ;    
    ctx.lineWidth = // something
    ctx.stroke();
    ctx.closePath();
    if(maxlimit < comp) {
        maxlimit++;
        setTimeout(redrawCanvas, 100);
    }
}

var maxlimit=0；
函数redrawCanvas（）{
ctx.beginPath（）；
ctx.strokeStyle=//什么
ctx.moveTo（//某处）；
ctx.lineTo（//某处）；
ctx.lineWidth=//某些东西
ctx.stroke（）；
ctx.closePath（）；
如果（最大限制<补偿）{
maxlimit++；
setTimeout（重绘画布，100）；
}
}

---

让我知道这是否有帮助

使用setInterval作为循环或我个人的建议：@kemicofa为什么要推荐间隔

requestAnimationFrame

是专门为保持性能而构建的，同时不会因不必要的渲染而阻塞同步管道。请准确显示您如何使用

setTimeout

在每个帧之间添加延迟。不要告诉我们你试过了，但没用，在问题中加上你是怎么试的。如果你只是把它放在

ctx.*

调用之间，函数就不是这样工作的。我把代码放在小提琴里，把绘图拆分成它自己的函数，然后使用递归在循环之间等待10毫秒@IrkenInvader谢谢，你的建议非常有效。我甚至从动画中获得了一些关于模式的见解。