HTML5의 canvas.putImageData에 대한 복수 호출

Question

자바에서 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; 
} 

이 표시 화상 데이터를 매 초마다 변경된다.

다른 해결책은 수정 알고리즘을 웹 작업자에게 위임하는 것입니다.