HTML5 Canvas Image Loader图像预加载教程

21962012-02-07

HTML5 Canvas的应用时需要多个图像,它通常是一个好主意之前加载的所有图像绘制在画布上,西安网站建设团队点墨网络竭诚为您服务。为了简化加载过程中,很方便使用图像加载功能,在图像源的对象需要,创建一个对象的图像,然后调用一个用户定义函数的所有图像都加载时。

HTML5画布图像装载机举例
 

html5_canvas_image_loader

 

[codes]

  1. var images = {};  
  2.    
  3. function loadImages(sources, callback){  
  4.     var loadedImages = 0;  
  5.     var numImages = 0;  
  6.     // get num of sources  
  7.     for (var src in sources) {  
  8.         numImages++;  
  9.     }  
  10.     for (var src in sources) {  
  11.         images[src] = new Image();  
  12.         images[src].onload = function(){  
  13.             if (++loadedImages >= numImages) {  
  14.                 callback();  
  15.             }  
  16.         };  
  17.         images[src].src = sources[src];  
  18.     }  
  19. }  
  20.    
  21. window.onload = function(){  
  22.     var canvas = document.getElementById("myCanvas");  
  23.     var context = canvas.getContext("2d");  
  24.    
  25.     var sources = {  
  26.         darthVader: "darth-vader.jpg",  
  27.         yoda: "yoda.jpg"  
  28.     };  
  29.    
  30.     loadImages(sources, function(){  
  31.         context.drawImage(images.darthVader, 100, 30, 200, 137);  
  32.         context.drawImage(images.yoda, 350, 55, 93, 104);  
  33.     });  
  34. }; 

[/codes]

通过本文您对西安网站建设有了进一步了解,本公司温馨提醒:找西安做网站公司,请选择手续齐全、业务精、服务好的正规公司。

工商网上亮照

版权所有:西安点墨网络科技有限公司 信息备案编号: 陕ICP备11004160号-1

客户服务电话:15229292610

公司注册地址:西安市雁塔区融鑫路丽湾蓝岛1幢3单元16层31605号

临时办公地址:西安市雁塔区朱雀大街紫郡长安F3

Sitemap 网站地图 手机版

服务热线:15229292610

客服信箱:vip@dianmo.cc

846461336327

版权所有:西安点墨网络科技有限公司 信息备案编号: 陕ICP备11004160号-1