日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
構(gòu)建Canvas動(dòng)畫框架進(jìn)度條的實(shí)現(xiàn)

今天和大家探討canvas動(dòng)畫框架之圖片預(yù)加載，如上圖的進(jìn)度條，這可不是假的進(jìn)度條，是真正能夠?qū)崟r(shí)獲取圖片加載進(jìn)度的進(jìn)度條。

10年積累的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有叢臺(tái)免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

為什么想要做這個(gè)進(jìn)度條呢？canvas需要進(jìn)度條么？答案顯然是肯定的。我們的頁面如果放到服務(wù)器上，圖片的下載將是相當(dāng)漫長的一個(gè)過程。如果我們不進(jìn)行預(yù)加載就開始執(zhí)行動(dòng)畫的話，那么用戶肯定看不到理想的效果。

那么我們就來看看canvas圖片預(yù)加載的實(shí)現(xiàn)（此處參考了網(wǎng)上一段代碼，來源：http://hi.baidu.com/jqz880321/item/fba0a210593b748489a9566c）

  
 
 
 
    
   
  
  
  
  1. /*star  
    2.    
  
  
  
  2.  *loading模塊  
    3.    
  
  
  
  3.  *實(shí)現(xiàn)圖片的預(yù)加載，并顯示進(jìn)度條  
    4.    
  
  
  
  4.  *參數(shù)：圖片數(shù)組對象，加載完成的回調(diào)函數(shù)  
    5.    
  
  
  
  5.  */  
    6.    
  
  
  
  6. function loadImages(sources,callback){      
    7.    
  
  
  
  7.     var loadedImages = 0;      
    8.    
  
  
  
  8.     var numImages = 0;    
    9.    
  
  
  
  9.     ctx.font='14px bold';  
    10.    
  
  
  
  10.     ctx.lineWidth=5;  
    11.    
  
  
  
  11.     var clearWidth=canvas.width;  
    12.    
  
  
  
  12.     var clearHeight=canvas.height;  
    13.    
  
  
  
  13.     // get num of sources      
    14.    
  
  
  
  14.     for (var src in sources) {      
    15.    
  
  
  
  15.         numImages++;      
    16.    
  
  
  
  16.     }      
    17.    
  
  
  
  17.     for (var src in sources) {      
    18.    
  
  
  
  18.         images[src] = new Image();  
    19.    
  
  
  
  19.         //當(dāng)一張圖片加載完成時(shí)執(zhí)行      
    20.    
  
  
  
  20.         images[src].onload = function(){   
    21.    
  
  
  
  21.             //重繪一個(gè)進(jìn)度條  
    22.    
  
  
  
  22.             ctx.clearRect(0,0,clearWidth,clearHeight);  
    23.    
  
  
  
  23.             ctx.fillText('Loading:'+loadedImages+'/'+numImages,200,280);  
    24.    
  
  
  
  24.             ctx.save();  
    25.    
  
  
  
  25.             ctx.strokeStyle='#555';  
    26.    
  
  
  
  26.             ctx.beginPath();  
    27.    
  
  
  
  27.             ctx.moveTo(200,300);  
    28.    
  
  
  
  28.             ctx.lineTo(600,300);  
    29.    
  
  
  
  29.             ctx.stroke();  
    30.    
  
  
  
  30.             ctx.beginPath();  
    31.    
  
  
  
  31.             ctx.restore();  
    32.    
  
  
  
  32.             ctx.moveTo(200,300);  
    33.    
  
  
  
  33.             ctx.lineTo(loadedImages/numImages*400+200,300);    
    34.    
  
  
  
  34.             ctx.stroke();  
    35.    
  
  
  
  35.             //當(dāng)所有圖片加載完成時(shí)，執(zhí)行回調(diào)函數(shù)callback  
    36.    
  
  
  
  36.             if (++loadedImages >= numImages) {      
    37.    
  
  
  
  37.                 callback();      
    38.    
  
  
  
  38.             }      
    39.    
  
  
  
  39.         };    
    40.    
  
  
  
  40.         //把sources中的圖片信息導(dǎo)入images數(shù)組    
    41.    
  
  
  
  41.         images[src].src = sources[src];      
    42.    
  
  
  
  42.     }      
    43.    
  
  
  
  43. }      
    44.    
  
  
  
  44. //定義預(yù)加載圖片數(shù)組對象，執(zhí)行l(wèi)oading模塊  
    45.    
  
  
  
  45. window.onload = function(){      
    46.    
  
  
  
  46.     var sources = {      
    47.    
  
  
  
  47.         PaperBoy1: "images/run/PaperBoy1.png",      
    48.    
  
  
  
  48.         PaperBoy2: "images/run/PaperBoy2.png",   
    49.    
  
  
  
  49.         PaperBoy3: "images/run/PaperBoy3.png",      
    50.    
  
  
  
  50.         PaperBoy4: "images/run/PaperBoy4.png",    
    51.    
  
  
  
  51.         PaperBoy5: "images/run/PaperBoy5.png",      
    52.    
  
  
  
  52.         PaperBoy6: "images/run/PaperBoy6.png",    
    53.    
  
  
  
  53.         PaperBoy7: "images/run/PaperBoy7.png",      
    54.    
  
  
  
  54.         PaperBoy8: "images/run/PaperBoy8.png",    
    55.    
  
  
  
  55.         PaperBoy9: "images/run/PaperBoy9.png",      
    56.    
  
  
  
  56.         PaperBoy10: "images/run/PaperBoy10.png",    
    57.    
  
  
  
  57.         PaperBoy11: "images/run/PaperBoy11.png",      
    58.    
  
  
  
  58.         PaperBoy12: "images/run/PaperBoy12.png",     
    59.    
  
  
  
  59.         PaperBoy13: "images/run/PaperBoy13.png",      
    60.    
  
  
  
  60.         PaperBoy14: "images/run/PaperBoy14.png",   
    61.    
  
  
  
  61.         PaperBoy15: "images/run/PaperBoy15.png",      
    62.    
  
  
  
  62.         PaperBoy16: "images/run/PaperBoy16.png",    
    63.    
  
  
  
  63.         PaperBoy17: "images/run/PaperBoy17.png",      
    64.    
  
  
  
  64.         PaperBoy18: "images/run/PaperBoy18.png",    
    65.    
  
  
  
  65.         PaperBoy19: "images/run/PaperBoy19.png",      
    66.    
  
  
  
  66.         PaperBoy20: "images/run/PaperBoy20.png",    
    67.    
  
  
  
  67.         PaperBoy21: "images/run/PaperBoy21.png",      
    68.    
  
  
  
  68.         PaperBoy22: "images/run/PaperBoy22.png",    
    69.    
  
  
  
  69.         PaperBoy23: "images/run/PaperBoy23.png",      
    70.    
  
  
  
  70.         PaperBoy24: "images/run/PaperBoy24.png",   
    71.    
  
  
  
  71.         _Street:'images/_Street.png',  
    72.    
  
  
  
  72.         AD:'images/AD.png',  
    73.    
  
  
  
  73.         building:'images/building.png',  
    74.    
  
  
  
  74.         cloud:'images/cloud.png'  
    75.    
  
  
  
  75.     };      
    76.    
  
  
  
  76.     //執(zhí)行圖片預(yù)加載，加載完成后執(zhí)行main  
    77.    
  
  
  
  77.     loadImages(sources,main);      
    78.    
  
  
  
  78. };     
    79.    
  
  
  
  79. /*end*/ 
    80.

當(dāng)windows.onload發(fā)生后，我們定義一個(gè)存儲(chǔ)著所有圖片信息的對象sources，然后把它傳入loadImages這個(gè)方法里。

重點(diǎn)是看看loadImages這個(gè)方法，它有兩個(gè)參數(shù)，一個(gè)是存儲(chǔ)的圖片信息的sources，一個(gè)是回調(diào)函數(shù)callback（一旦圖片加載完畢，即執(zhí)行callback。我們這里執(zhí)行的是main函數(shù)，意味著動(dòng)畫開始初始化）

總圖片數(shù)我們存在numImages里面：

  
 
 
 
    
   
  
  
  
  1. // 首先遍歷數(shù)組，計(jì)算出總圖片數(shù)      
    2.    
  
  
  
  2.     for (var src in sources) {      
    3.    
  
  
  
  3.         numImages++;      
    4.    
  
  
  
  4.     }     
    5.

其實(shí)這個(gè)方法的核心就是給每張圖片添加一個(gè)onload事件。

當(dāng)每張圖片加載完成后，我們做了三件事：

1.計(jì)算出加載完成圖片與總圖片的百分比；

2.然后畫出一個(gè)用戶可見的進(jìn)度條，告訴用戶加載的進(jìn)度；

3.做判斷看圖片是否加載完，如加載完了就執(zhí)行callback，否則返回error。

結(jié)構(gòu)如下：

  
 
 
 
    
   
  
  
  
  1. //當(dāng)一張圖片加載完成時(shí)執(zhí)行  
    2.    
  
  
  
  2.   images[src].onload = function(){  
    3.    
  
  
  
  3. 　 //計(jì)算出加載圖片數(shù)，并根據(jù)總圖片數(shù)，算出百分比  
    4.    
  
  
  
  4.    //畫出進(jìn)度條  
    5.    
  
  
  
  5.    //if圖片加載完畢，則執(zhí)行callback
    6.    
  
  
  
  6. } 
    7.

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


網(wǎng)頁名稱：構(gòu)建Canvas動(dòng)畫框架進(jìn)度條的實(shí)現(xiàn)
本文網(wǎng)址：http://m.5511xx.com/article/coepgig.html