canvas图片预加载及进度条的实现

作者Veris 文章分类 分类:HTML5 文章评论 1条评论 阅读次数 已被围观 1255
今天和大家探讨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
}

分类:HTML5
标签: canvas html5

评论:

  1. [回复]as发表于 2017-06-23 10:18
    aaaaa啊啊啊

发表评论: