如何“查看”在实时绘制的画布

Question

我之前没有尝试过画布。我做了一个项目，涉及一个不断扩展的画布，新的“数据”行被附加到它的底部。

我的实际渲染部分工作正常;最终输出是我想要的......但我对项目的意图是能够观看它在屏幕上绘制。但是，相反的情况是画布只挂起几秒钟，然后立即显示所有内容。这至少发生在Chrome中，我没有测试过其他浏览器。

我正在使用如下循环：

for(var i = 0; i < 500; i++){
    addRow(data, canvas);
}

基本上我想查看正在绘制的每一行。

我有什么想法可以做到这一点？

Answer 1

由于JavaScript是单线程的，因此在循环运行时无法重绘画布。

您必须在调用addRow之间创建空闲时刻，以便释放JavaScript线程以实际操作新数据。您可以通过调用addRow异步来执行此操作;最简单的方法是（ab）使用标准函数setTimeout ¹ 。

setTimeout接受一个函数并在给定的延迟后异步执行此函数（如果省略delay参数，则假定延迟为0ms）。我之前称之为滥用此功能，因为您没有使用延迟功能，但我认为这是异步执行代码的标准方法;如果没有，请告诉我。

你也可以将匿名函数（而不是命名函数）传递给setTimeout，如下所示：

for(var i = 0; i < 500; i++){
    setTimeout(function() {
        data = calculateNextRow(data)
        addRow(data, canvas);
    });
}

如果你需要在匿名函数中使用i，那么会有一些范围问题在这里解释起来很复杂，但this answer在问题的深层原因方面做得很好提到并且实例3和5准确地说明了这些问题。

^{1：在我之前的评论中，我建议setInterval这是一个错误; setInterval重复调用传递的函数，这是多余的，因为你将从循环中调用它。否则setTimeout和setInterval非常相似。}