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

我已经花了很多时间搜索这个，但不是这不是一个很常见的问题，就是我的谷歌fu缺乏

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

如何才能连接到绘图事件中？我找不到任何类似的东西，但如果在绘制画布时显示加载微调器，将真正有助于用户体验。我以前看过，但没看过“怎么做”

有经验者的详细信息：

---

我正在显示一个带有PDFJS的PDF，并且有自己的查看器，而不是提供的查看器。它可以工作，但有时它绘制PDF的速度非常慢，因此需要一个微调器。

这里有一个非常简单和讨厌的示例，它现在使用一个可以触发的事件：）

jsFiddle：

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

---

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

为什么不创建一个

onload

函数，当画布绘制新的10秒图像时将调用该函数？我明白您的观点，这是我遇到的问题，但在我投入解决方案之前，我想看看是否可以制作某种半通用的事件监听器。我已经更新了答案，使用了一个事件