构建canvas动画框架（三）——canvas图片预加载及进度条的实现

照例先回顾一下目录

1.通用类的提取：动画对象与帧对象

2.灵与肉的结合：便于拆卸的运动方程

3.进度条的实现：canvas的图片预加载

4.demo测试：通过一个demo测试框架

今天和大家探讨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
}