这是一个非常简单且令人讨厌的示例,它现在使用一个您可以触发的事件:)。
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);
这现在使用一个事件,您可以手动触发该事件,它将画布设置为加载。