Question

我正在使用HTML5 canvas开发此壁纸生成器。（https://github.com/arnav-t/pursuit-wallpapers）
它使用追踪曲线生成模式。
我希望生成过程具有动画效果，并且对用户可见。
这些线是在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();
}

我尝试在每帧之间添加setTimeout()的延迟，但这没有帮助。

Answer 1

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);
    }
}

让我知道这是否有帮助！

立即显示对HTML5画布的更改

1 个答案: