HTML5 画布进度条答案

【问题标题】：HTML5 canvas progress barHTML5 画布进度条
【发布时间】：2017-08-08 03:07:34
【问题描述】：

我想在加载资产时在 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);
})

function(_loaded) 是从Download() 调用的，它可以工作（我的意思是它显示在日志"callback called" 中，但画布在整个Download() 结束后更新。所以一直以来我什么都看不到......然后是完整的栏:(

谁能帮帮我？

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

在javascript中你不能监听文件下载进度，你唯一能监听的是文件下载完成

因此，如果您在每个完成时都有一个包含 N 个图像的列表，您可以调用更新进度条，但您不能为下载的每个字节执行此操作

【讨论】：

这适用于 HTML5 之前的浏览器，但不代表支持的浏览器。

【解决方案2】：

您实际上可以使用 XMLHttpRequest Level 2 progress 事件监控下载。在大多数具有画布的浏览器中，XHR2 为 supported，但 IE9 除外。

var xhr = new XMLHttpRequest();


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

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

【讨论】：