我将多个 PNG 图像加载到画布上，因此生成画布需要一些时间。
我想在画布加载时显示加载图标。如何检查画布是否正在加载或准备就绪？
HTML:
<canvas id="myCanvas" width="1300" height="800"></canvas>
JavaScript：
function buildCanvas(settings){
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var ctx = canvas.getContext("2d");
var background = new Image();
background.onload = function() {
context.drawImage(background, 0, 0, 1300, 836);
};
background.src = 'data/skin-army.png';
}
当创建画布或开始获取图像时，做一些事情来指示用户图像正在加载，如果您还想使用画布通知用户图像已加载，请将该逻辑放入img.onload.
找了一张足够大的图片来演示，应该能看到文字的变化。
function buildCanvas(settings){
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var ctx = canvas.getContext("2d");
var images = [
'http://www.fmglobal.com/assets/images/library/download/hydraulicslab_1.jpg',
'http://www.fmglobal.com/assets/images/library/download/Fireslope.jpg',
'http://www.fmglobal.com/assets/images/library/download/Firefighter_firetest.jpg',
'http://www.fmglobal.com/assets/images/library/download/rowsprinklers.jpg'
];
var imagesLoading = images.length;
// Image loader.
var loadImage = function(i) {
var img = new Image();
img.onload = function() {
images[i] = img;
--imagesLoading;
// Call the complete callback when all images loaded.
if (imagesLoading === 0) {
workDone();
}
};
img.src = images[i];
};
// Call upon all images loaded.
var workDone = function() {
// Clear canvas
canvas.width = canvas.width;
// Anything you want to notify the user image is Ready.
ctx.fillText("Ready", 100, 130);
var i, iLen = images.length;
for (i = 0; i < iLen; ++i) {
context.drawImage(images[i], 100*i, 0, 100*(i+1), 100);
}
};
// Start to load all images.
var i;
for(i = 0; i < imagesLoading; ++i) {
loadImage(i);
}
// Show image loading. with animation or something else...
ctx.fillText("loading", 100, 130);
}
buildCanvas();
<canvas id="myCanvas" width="500" height="300"></canvas>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
