在 HTML5 canvas 中的每次循环迭代中呈现

Question

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

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

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

Answer 1

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

这里是 fiddle 它的一般运作方式：

以及 requestAnimationFrame

的文档

render on each iteration on loop in HTML5 canvas