canvas需要进度条么？答案显然是肯定的。我们的页面如果放到服务器上，图片的下载将是相当漫长的一个过程。如果我们不进行预加载就开始执行动画的话，那么用户肯定看不到理想的效果。
今天和大家探讨canvas动画框架之图片预加载，如上图的进度条，这可不是假的进度条，是真正能够实时获取图片加载进度的进度条。
为什么想要做这个进度条呢？canvas需要进度条么？答案显然是肯定的。我们的页面如果放到服务器上，图片的下载将是相当漫长的一个过程。如果我们不进行预加载就开始执行动画的话，那么用户肯定看不到理想的效果。
那么我们就来看看canvas图片预加载的实现
/*star *loading模块 *实现图片的预加载，并显示进度条 *参数：图片数组对象，加载完成的回调函数 */
function loadImages(sources,callback){ var loadedImages = 0; var numImages = 0; ctx.font='14px bold'; ctx.lineWidth=5; var clearWidth=canvas.width; var clearHeight=canvas.height; // get num of sources for (var src in sources) { numImages++; } for (var src in sources) { images[src] = new Image(); //当一张图片加载完成时执行 images[src].onload = function(){ //重绘一个进度条 ctx.clearRect(0,0,clearWidth,clearHeight); ctx.fillText('Loading:'+loadedImages+'/'+numImages,200,280); ctx.save(); ctx.strokeStyle='#555'; ctx.beginPath(); ctx.moveTo(200,300); ctx.lineTo(600,300); ctx.stroke(); ctx.beginPath(); ctx.restore(); ctx.moveTo(200,300); ctx.lineTo(loadedImages/numImages*400+200,300); ctx.stroke(); //当所有图片加载完成时，执行回调函数callback if (++loadedImages >= numImages) { callback(); } }; //把sources中的图片信息导入images数组 images[src].src = sources[src]; }
}
//定义预加载图片数组对象，执行loading模块
window.onload = function(){ var sources = { PaperBoy1: "images/run/PaperBoy1.png", PaperBoy2: "images/run/PaperBoy2.png", PaperBoy3: "images/run/PaperBoy3.png", PaperBoy4: "images/run/PaperBoy4.png", PaperBoy5: "images/run/PaperBoy5.png", PaperBoy6: "images/run/PaperBoy6.png", PaperBoy7: "images/run/PaperBoy7.png", PaperBoy8: "images/run/PaperBoy8.png", PaperBoy9: "images/run/PaperBoy9.png", PaperBoy10: "images/run/PaperBoy10.png", PaperBoy11: "images/run/PaperBoy11.png", PaperBoy12: "images/run/PaperBoy12.png", PaperBoy13: "images/run/PaperBoy13.png", PaperBoy14: "images/run/PaperBoy14.png", PaperBoy15: "images/run/PaperBoy15.png", PaperBoy16: "images/run/PaperBoy16.png", PaperBoy17: "images/run/PaperBoy17.png", PaperBoy18: "images/run/PaperBoy18.png", PaperBoy19: "images/run/PaperBoy19.png", PaperBoy20: "images/run/PaperBoy20.png", PaperBoy21: "images/run/PaperBoy21.png", PaperBoy22: "images/run/PaperBoy22.png", PaperBoy23: "images/run/PaperBoy23.png", PaperBoy24: "images/run/PaperBoy24.png", _Street:'images/_Street.png', AD:'images/AD.png', building:'images/building.png', cloud:'images/cloud.png' }; //执行图片预加载，加载完成后执行main loadImages(sources,main);
};
/*end*/
当windows.onload发生后，我们定义一个存储着所有图片信息的对象sources，然后把它传入loadImages这个方法里。
重点是看看loadImages这个方法，它有两个参数，一个是存储的图片信息的sources，一个是回调函数callback（一旦图片加载完毕，即执行callback。我们这里执行的是main函数，意味着动画开始初始化）
总图片数我们存在numImages里面：
// 首先遍历数组，计算出总图片数 for (var src in sources) { numImages++; }
其实这个方法的核心就是给每张图片添加一个onload事件。
当每张图片加载完成后，我们做了三件事：
1.计算出加载完成图片与总图片的百分比；
2.然后画出一个用户可见的进度条，告诉用户加载的进度；
3.做判断看图片是否加载完，如加载完了就执行callback，否则返回error。
结构如下：
//当一张图片加载完成时执行 images[src].onload = function(){ //计算出加载图片数，并根据总图片数，算出百分比 //画出进度条 //if图片加载完毕，则执行callback
}
