簡體   English   中英

HTML5中多次調用canvas.putImageData

[英]Multiple calls to canvas.putImageData in HTML5

我正在構建一個應用程序,該應用程序在Javascript中對canvas.putImageData進行了用戶指定的調用canvas.putImageData 在對putImageData每次調用之間,將修改圖像數據。 兩次調用之間修改數據所需的時間有所不同。 用戶還需要能夠在動畫運行時停止動畫(我正在使用按鈕)。 最初我使用:

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

但是,它不會顯示每一幀,僅顯示最后一幀。 起作用的是在canvas.putImageData之后放置一個警報,但這太煩人了。 我確信很多人都會建議使用setIntervalcancelInterval ,但這對我不起作用,原因有兩個:

  • 修改圖像數據所需的時間有所不同。
  • 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;
}

這將每秒顯示和修改圖像數據。

另一種解決方案是將修改算法委托給網絡工作者。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM