javascript - HTML5 中对 canvas.putImageData 的多次调用

Question

我正在构建一个应用程序，该应用程序在 Javascript 中对 canvas.putImageData 进行用户指定次数的调用。在每次调用 putImageData 之间，图像数据都会被修改。修改数据所需的时间因调用而异。用户还需要能够在动画运行时停止动画(我使用的是按钮)。最初我使用:

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

但是，这不会显示每一帧，只会显示最后一帧。有效的方法是在 canvas.putImageData 之后放置一个警报，但这非常烦人。我尝试使用 setInterval 和 cancelInterval 我相信很多人都会建议，但这对我不起作用，原因有两个:

• 修改图像数据所需的时间各不相同。
• setInterval 是异步的；如果我使用的延迟太短，对修改(imgdata)的调用会堆积在堆栈上，用户将无法在需要时停止动画。

如何才能使其正常工作？

Answer 1

使用重复的 setTimeout():

var shouldStop = false;

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

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

function stop() {
  shouldStop = true;
}

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

另一种解决方案是将修改算法委托(delegate)给网络 worker 。