我正在使用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()但这没有帮助。
Javascript异步运行。所述for循环执行第一，那么它会寻找我值，这是补偿在循环的执行结束时，然后输出setTimeOut 补偿次，每个循环迭代。您只会一直看到最后一次执行的结果。可以使用以下方法来代替使用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);
}
}
让我知道是否有帮助！
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句