使用setTimeout在画布中顺序填充形状

Sequentially filling shapes in canvas using setTimeout

本文关键字：填充 顺序 布中 setTimeout 使用      更新时间：2023-09-26

我用一个路线查找器做了一个迷宫应用程序。当它沿着路线行进时，它会调用绘制画布，突出显示途中的每个单元格。然而，最终发生的是，它会阻塞，直到完全完成，然后绘制到画布上。大致如此：

Path.prototype.travelTo (cell) {
  this.previous = this.cell;
  this.cell = cell;
  this.cell.fill = 'yellow';
  this.maze.draw();
  var choice = findChoice();
  this.travelTo(choice);
};

迷宫类跟踪所有细胞，其绘制函数在每个细胞中循环，调用细胞自己的绘制函数。

我做了一个快速的小提琴(http://jsfiddle.net/amctammany/99VVu/)模拟问题。在这里，它通过setTimeout递归地调用自己，从一个单元格移动到下一个单元格。结果是一样的，它会立即填充所有单元格，甚至不需要等待任何时间。

如有任何帮助，我们将不胜感激。

我看了一下您的jsfiddle，首先注意到的是您的setTimeout:

window.setTimeout(fillNext(i + 1), 500);

但也许你想这么做：

window.setTimeout(function() {fillNext(i + 1)}, 500);

您应该将CCD_ 1设置为对CCD_，不使用fillNext(i+1)的返回值作为window.setTimeout() 的参数

更新下面的行，如下所示。然后你可以看到动画。

  "window.setTimeout(fillNext(i + 1), 500);"  To "window.setTimeout(fillNext, 100,(i + 1));"

我已经更新了小提琴。你现在可以检查了。

相关文章：