javascript - HTML5中多次调用canvas.putImageData

我正在构建一个应用程序，该应用程序在Javascript中对用户指定的canvas.putImageData调用次数。在每次调用putImageData之间，图像数据都会被修改。两次调用之间修改数据所需的时间有所不同。用户还需要能够在动画运行时停止动画（我正在使用按钮）。最初，我使用：

for (var i=0; i < n; i++) {
    canvas.putImageData(imgdata, 0, 0);
    modify(imgdata);
}

但是，它不会显示每一帧，仅显示最后一帧。起作用的是在canvas.putImageData之后放置一个警报，但这太烦人了。我尝试使用setInterval和cancelInterval，正如我确定的那样，但这对我不起作用，原因有两个：


修改图像数据所需的时间会有所不同。
setInterval是异步的；如果我使用的延迟太短，则对Modify（imgdata）的调用会堆积在堆栈上，并且用户将无法根据需要停止动画。


我如何才能使其正常工作？

最佳答案

使用重复的setTimeout（）：

var shouldStop = false;

function iteration() {
  canvas.putImageData(imgData, 0, 0);
  modify(imgData);

  if (!shouldStop) {
    window.setTimeout(iteration, 1000);
  }
}

function stop() {
  shouldStop = true;
}

这将每秒显示和修改图像数据。

另一种解决方案是将修改算法委托给网络工作者。