HTML5-Canvas-Fortschrittsbalken

Question

ich einen Fortschrittsbalken auf HTML5 Leinwand zeichnen wollen, während Vermögenswerte werden geladen, und ich verwende diesen Code:

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) von Download() genannt wird, und es funktioniert (ich meine es ist die Anzeige in das Protokoll "callback called", aber die Leinwand wird nach den ganzen Download() Enden aktualisiert. So alle Mal, dass ich nichts sehen ... und dann der volle Bar :(

Kann mir jemand helfen?

Answer 1

in javascript Sie können nicht li Wenn Sie eine Liste von N Bildern haben, wenn jeder fertig ist, können Sie den Update-Fortschrittsbalken aufrufen, aber Sie können es nicht für jedes heruntergeladene Byte tun

Answer 2

Sie können den Download tatsächlich mit dem Ereignis XMLHttpRequest Level 2 progress überwachen. XHR2 ist supported in den meisten Browsern, die eine Canvas mit IE9 als Ausnahme haben.

var xhr = new XMLHttpRequest(); 


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

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