绘制 HTML5 画布时显示加载微调器。事件？答案

【问题标题】：Displaying a loading spinner when drawing HTML5 canvas. Event?绘制 HTML5 画布时显示加载微调器。事件？
【发布时间】：2016-01-17 19:01:17
【问题描述】：

我已经花了很多时间搜索这个，但要么这不是一个很常见的问题，要么我的 Google-fu 缺少。

简短的版本是我有一个带有 HTML5 画布元素的网站，它显示大型复杂绘图，这意味着它通常需要 10 秒才能完成。

如何挂钩到绘图事件？我找不到任何类似的东西，但如果在绘制画布时显示加载微调器，它真的会帮助用户体验。我以前看过它，但没有看到“如何”。

有经验者的详细信息： 我正在使用 PDFJS 显示 PDF，并且有自己的查看器而不是提供的查看器。它可以工作，但有时它绘制 PDF 的速度很慢，因此需要微调器。

【问题讨论】：

你为什么不创建一个onLoading 函数，当你的画布绘制新的 10 秒图像时会调用它？
我明白你的意思，这是我曾经发生过的事情，但在我投入到那个解决方案之前，我会看看我是否可以制作某种半通用的事件监听器。
我已经更新了使用事件的答案

标签： html html5-canvas pdfjs

【解决方案1】：

这是一个非常简单但令人讨厌的例子，它现在使用一个你可以触发的事件:)。

jsFiddle : https://jsfiddle.net/CanvasCode/jwzLr4wh/1/

javascript

    image = new Image();
image.src = "https://upload.wikimedia.org/wikipedia/commons/1/1e/Large_Siamese_cat_tosses_a_mouse.jpg";

var canvas = document.getElementById('myCanvas-1');
var ctx = document.getElementById('myCanvas-1').getContext('2d');
var loading = true;
var loadingText = "Loading";

var event = new Event('loading');

// Listen for the event.
canvas.addEventListener('loading', function (e) {
    // Quick and nasty
    setInterval(function () {
        if (loading) {
            console.log("update");
            ctx.fillStyle = "#FFF";
            ctx.fillRect(0, 0, 400, 400);
            ctx.font = '15pt Arial ';
            ctx.fillStyle = "#000";
            ctx.fillText(loadingText, 200, 200);
            if (loadingText == "Loading...") {
                loadingText = "Loading";
            }
            loadingText = loadingText + "."
        }
    }, 1);
}, false);

canvas.dispatchEvent(event);
setTimeout(function () {
    ctx.drawImage(image, 0, 0);
    ctx.font = '15pt Arial ';
    ctx.fillStyle = "#000";
    loading = false;
}, 5000);

这现在使用一个您可以手动触发的事件，它将设置画布加载。

【讨论】：