1

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

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

但是，这不会显示每一帧，只显示最后一帧。起作用的是在 之后发出警报canvas.putImageData，但这非常烦人。我尝试使用setInterval并且cancelInterval我相信很多人会建议，但这对我不起作用，原因有两个：

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

我怎样才能使它正常工作？

4

1 回答 1

0

使用重复的 setTimeout()：

var shouldStop = false;

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

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

function stop() {
  shouldStop = true;
}

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

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

于 2013-08-08T09:32:03.247 回答