在 HTML5 画布中的每次循环迭代上渲染答案

【问题标题】：render on each iteration on loop in HTML5 canvas在 HTML5 画布中的每次循环迭代上渲染
【发布时间】：2021-08-23 22:39:57
【问题描述】：

我有一个函数，它接受一个极坐标方程并逐个像素地绘制它。
整个循环完成，然后在最后渲染，但我不希望它等到循环结束才能显示完整的东西，我只想显示每个像素，因为它正在被一个一个渲染。
大多数解决方案都在谈论刷新整个内容并重新渲染以前的内容，这似乎效率低下而且还有些复杂。

有没有一种功能或技术可以帮助我在没有太多复杂性的情况下完成这项工作？可能是这样的：

do {
   putPixel(x,y, color);
   renderNow();
   wait();
} while ...

【问题讨论】：

【解决方案1】：

您可以使用requestAnimationFrame，然后每帧绘制一个像素，同时递增x。

以下是它的一般工作原理：

以及requestAnimationFrame 的文档

【讨论】：

这似乎将循环更改为递归。有没有办法避免这种情况？并且似乎 requestAnimationFrame 只接受一个没有参数的函数，这意味着要进行更多更改
是的，有一种方法可以取消动画帧。见这里：developer.mozilla.org/en-US/docs/Web/API/Window/…
RAF isn't recursive 你可以通过用你想要的参数包装你的内部函数来将参数传递给回调。一般来说，当你制作动画时，清除整个东西并在每一帧上重新绘制它。不要过早地担心效率。也就是说，很多像this 这样的草图转换不需要清除，因为你基本上是在画一帧/图像，只是在小阶段。