HTML5 캔버스 진행 표시 줄

Question

나는 자산을로드하는 동안 HTML5 캔버스에 진행률 표시 줄을 그리려는, 나는이 코드를 사용

: 나는에 표시하는 것 의미 (Download()에서

Assets.Download(function(_loaded) { 
    console.log("callback called");//its displayed in log 
    ctx.beginPath(); 
    ctx.rect(0, 0, _loaded * 500, 50); 
    ctx.fillStyle = "#8ED6FF"; 
    ctx.fill(); 
    ctx.lineWidth = 5; 
    ctx.strokeStyle = "black"; 
    ctx.stroke(); 
    sleep(1000); 
}) 

function(_loaded)라고, 그리고 작동 로그 "callback called"하지만, 캔버스. 전체 Download() 종료 후 업데이트됩니다 그래서 난 아무것도 볼 모든 시간 ... 그리고 전체 줄 :(

누군가가 나를 도울 수 있습니까?

Answer 1

자바 스크립트는 리튬 수 없습니다에 당신이들을 수있는 유일한 것은 파일 다운로드 완료입니다.

그래서 각각 완료 될 때 N 개의 이미지 목록이 있다면 업데이트 진행률 막대를 호출 할 수 있지만 다운로드 된 각 바이트에 대해 수행 할 수는 없습니다

Answer 2

실제로 XMLHttpRequest Level 2 progress 이벤트를 사용하여 다운로드를 모니터링 할 수 있습니다. XHR2는 IE9가 예외 인 캔버스가있는 대부분의 브라우저에서 supported입니다.

var xhr = new XMLHttpRequest(); 


xhr.addEventListener('progress', function(event) { 

    console.log(event.loaded/event.total); 
}, 
false);