今天和大家探讨canvas动画框架之图片预加载,如上图的进度条,这可不是假的进度条,是真正能够实时获取图片加载进度的进度条。
为什么想要做这个进度条呢?canvas需要进度条么?答案显然是肯定的。我们的页面如果放到服务器上,图片的下载将是相当漫长的一个过程。如果我们不进行预加载就开始执行动画的话,那么用户肯定看不到理想的效果。
那么我们就来看看canvas图片预加载的实现(此处参考了网上一段代码,来源:http://hi.baidu.com/jqz880321/item/fba0a210593b748489a9566c)
- /*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
- }
原文链接:http://www.cnblogs.com/shawn-xie/archive/2012/07/13/2589776.html
【编辑推荐】