构建Canvas动画框架进度条的实现

开发 前端
canvas需要进度条么?答案显然是肯定的。我们的页面如果放到服务器上,图片的下载将是相当漫长的一个过程。如果我们不进行预加载就开始执行动画的话,那么用户肯定看不到理想的效果。

今天和大家探讨canvas动画框架之图片预加载,如上图的进度条,这可不是假的进度条,是真正能够实时获取图片加载进度的进度条。

为什么想要做这个进度条呢?canvas需要进度条么?答案显然是肯定的。我们的页面如果放到服务器上,图片的下载将是相当漫长的一个过程。如果我们不进行预加载就开始执行动画的话,那么用户肯定看不到理想的效果。

那么我们就来看看canvas图片预加载的实现(此处参考了网上一段代码,来源:http://hi.baidu.com/jqz880321/item/fba0a210593b748489a9566c

  1. /*star  
  2.  *loading模块  
  3.  *实现图片的预加载,并显示进度条  
  4.  *参数:图片数组对象,加载完成的回调函数  
  5.  */  
  6. function loadImages(sources,callback){      
  7.     var loadedImages = 0;      
  8.     var numImages = 0;    
  9.     ctx.font='14px bold';  
  10.     ctx.lineWidth=5;  
  11.     var clearWidth=canvas.width;  
  12.     var clearHeight=canvas.height;  
  13.     // get num of sources      
  14.     for (var src in sources) {      
  15.         numImages++;      
  16.     }      
  17.     for (var src in sources) {      
  18.         images[src] = new Image();  
  19.         //当一张图片加载完成时执行      
  20.         images[src].onload = function(){   
  21.             //重绘一个进度条  
  22.             ctx.clearRect(0,0,clearWidth,clearHeight);  
  23.             ctx.fillText('Loading:'+loadedImages+'/'+numImages,200,280);  
  24.             ctx.save();  
  25.             ctx.strokeStyle='#555';  
  26.             ctx.beginPath();  
  27.             ctx.moveTo(200,300);  
  28.             ctx.lineTo(600,300);  
  29.             ctx.stroke();  
  30.             ctx.beginPath();  
  31.             ctx.restore();  
  32.             ctx.moveTo(200,300);  
  33.             ctx.lineTo(loadedImages/numImages*400+200,300);    
  34.             ctx.stroke();  
  35.             //当所有图片加载完成时,执行回调函数callback  
  36.             if (++loadedImages >= numImages) {      
  37.                 callback();      
  38.             }      
  39.         };    
  40.         //把sources中的图片信息导入images数组    
  41.         images[src].src = sources[src];      
  42.     }      
  43. }      
  44. //定义预加载图片数组对象,执行loading模块  
  45. window.onload = function(){      
  46.     var sources = {      
  47.         PaperBoy1: "images/run/PaperBoy1.png",      
  48.         PaperBoy2: "images/run/PaperBoy2.png",   
  49.         PaperBoy3: "images/run/PaperBoy3.png",      
  50.         PaperBoy4: "images/run/PaperBoy4.png",    
  51.         PaperBoy5: "images/run/PaperBoy5.png",      
  52.         PaperBoy6: "images/run/PaperBoy6.png",    
  53.         PaperBoy7: "images/run/PaperBoy7.png",      
  54.         PaperBoy8: "images/run/PaperBoy8.png",    
  55.         PaperBoy9: "images/run/PaperBoy9.png",      
  56.         PaperBoy10: "images/run/PaperBoy10.png",    
  57.         PaperBoy11: "images/run/PaperBoy11.png",      
  58.         PaperBoy12: "images/run/PaperBoy12.png",     
  59.         PaperBoy13: "images/run/PaperBoy13.png",      
  60.         PaperBoy14: "images/run/PaperBoy14.png",   
  61.         PaperBoy15: "images/run/PaperBoy15.png",      
  62.         PaperBoy16: "images/run/PaperBoy16.png",    
  63.         PaperBoy17: "images/run/PaperBoy17.png",      
  64.         PaperBoy18: "images/run/PaperBoy18.png",    
  65.         PaperBoy19: "images/run/PaperBoy19.png",      
  66.         PaperBoy20: "images/run/PaperBoy20.png",    
  67.         PaperBoy21: "images/run/PaperBoy21.png",      
  68.         PaperBoy22: "images/run/PaperBoy22.png",    
  69.         PaperBoy23: "images/run/PaperBoy23.png",      
  70.         PaperBoy24: "images/run/PaperBoy24.png",   
  71.         _Street:'images/_Street.png',  
  72.         AD:'images/AD.png',  
  73.         building:'images/building.png',  
  74.         cloud:'images/cloud.png'  
  75.     };      
  76.     //执行图片预加载,加载完成后执行main  
  77.     loadImages(sources,main);      
  78. };     
  79. /*end*/ 

当windows.onload发生后,我们定义一个存储着所有图片信息的对象sources,然后把它传入loadImages这个方法里。

重点是看看loadImages这个方法,它有两个参数,一个是存储的图片信息的sources,一个是回调函数callback(一旦图片加载完毕,即执行callback。我们这里执行的是main函数,意味着动画开始初始化)

总图片数我们存在numImages里面:

  1. // 首先遍历数组,计算出总图片数      
  2.     for (var src in sources) {      
  3.         numImages++;      
  4.     }     

其实这个方法的核心就是给每张图片添加一个onload事件。

当每张图片加载完成后,我们做了三件事:

1.计算出加载完成图片与总图片的百分比;

2.然后画出一个用户可见的进度条,告诉用户加载的进度;

3.做判断看图片是否加载完,如加载完了就执行callback,否则返回error。

结构如下:

  1. //当一张图片加载完成时执行  
  2.   images[src].onload = function(){  
  3.   //计算出加载图片数,并根据总图片数,算出百分比  
  4.    //画出进度条  
  5.    //if图片加载完毕,则执行callback

原文链接:http://www.cnblogs.com/shawn-xie/archive/2012/07/13/2589776.html

【编辑推荐】

  1. 构建canvas动画框架通用类的提取
  2. 构建Canvas动画框架灵与肉的结合
  3. 使用JavaScript和Canvas写一个游戏框架
  4. 使用 HTML5 canvas 绘制精美的图形
  5. HTML5 Canvas基础教程
责任编辑:张伟 来源: shawn.xie的博客
相关推荐

2012-07-11 15:54:59

canvas

2012-07-13 13:41:35

Canvas

2024-07-25 08:55:47

进度条水缸进度动画效果

2024-08-06 14:29:37

2023-12-11 17:15:05

应用开发波纹进度条ArkUI

2015-07-31 11:19:43

数字进度条源码

2024-06-13 08:15:00

2009-08-17 15:48:47

C# WinForm进

2009-08-17 14:41:47

C#进度条实现

2009-11-24 15:23:50

PHP文件上传进度条

2023-11-30 11:38:29

CSS网页进度条

2009-07-21 14:49:55

XmlHttpRequ文件上传进度条

2011-07-05 15:16:00

QT 进度条

2024-07-04 11:25:34

2009-08-17 17:15:48

C# 进度条效果

2015-01-12 12:13:03

Android进度条ProgressDia

2009-08-17 14:36:15

C#进度条实现

2013-03-12 10:35:06

CSS 3

2015-08-03 11:39:20

拟物化进度条

2015-01-12 09:30:54

Android进度条ProgressDia
点赞
收藏

51CTO技术栈公众号