HTML5畫布進度欄

Question

我想在加載資產時在HTML5畫布上繪制進度條，並使用以下代碼：

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);
})

從Download()調用function(_loaded) ，並且它起作用（我是說它在日志中顯示為"callback called" function(_loaded) "callback called" ，但是畫布在整個Download()結束后進行了更新。因此，我一直都看不到...然后滿吧:(

誰能幫我？

Answer 1

在javascript中，您無法監聽文件下載進度，唯一可以監聽的是文件下載完成

因此，如果每個完成時都有N張圖像的列表，則可以調用更新進度欄，但不能為下載的每個字節執行此操作

Answer 2

實際上，您可以使用XMLHttpRequest Level 2 progress事件監視下載。 大多數具有畫布的瀏覽器都支持 XHR2，IE9是例外。

var xhr = new XMLHttpRequest();


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

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