[英]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
之后放置一個警報,但這太煩人了。 我確信很多人都會建議使用setInterval
和cancelInterval
,但這對我不起作用,原因有兩個:
我如何才能使其正常工作?
使用重復的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.