Heim > Web-Frontend > H5-Tutorial > HTML5实现的Loading缓冲效果

HTML5实现的Loading缓冲效果

WBOY
Freigeben: 2016-05-17 09:09:06
Original
3507 Leute haben es durchsucht

       HTML5在移动设备上表现,相信已经不用我多说了,干掉了Flash之后,它已经坐上了移动应用程序的第一把交椅。几乎所有稍微高端一点的设备(乔帮主的iPad,iPhone和Andriod的平板手机等)的浏览器都支持HTML5,而且据权威人士测试,这些支持HTML5的设备对Canvas标签的支持也是相当的好。

        大家都知道Web2.0以来,应用程序的实现使用了大量Ajax,而Loading的小图标也有很多,甚至还有专门提供Loading图片的网站,所以我就想能不能让HTML5一并解决这个以前用gif文件才能解决的问题。出乎我意料的是,实现的过程非常简单,只用了不到一小时的时间我就用HTML5实验出了两个Loading效果,而且这样做出来的Loading图标是可定制的,既可以定制颜色,也可以定制大小等属性。

        第一个带着小尾巴转动的loading图标画图的思路是,首先画一个圆,然后在圆的边上按顺序画大小逐渐减小的小圆点,在每次刷新画布时改变这一系列的小圆点在大圆边上的位置。

        这里是案例的演示代码:



  1.   
  2.    
  3.    loading
  4.    
  5.     function loading(canvas,options){
  6.       this.canvas = canvas;
  7.       if(options){
  8.         this.radius = options.radius||12;
  9.         this.circleLineWidth = options.circleLineWidth||4;
  10.         this.circleColor = options.circleColor||'lightgray';
  11.         this.dotColor = options.dotColor||'gray';
  12.       }else{
  13.         this.radius = 12;
  14.         this.circelLineWidth = 4;
  15.         this.circleColor = 'lightgray';
  16.         this.dotColor = 'gray';
  17.       }
  18.     }
  19.     loading.prototype = {
  20.       show:function (){
  21.         var canvas = this.canvas;
  22.         if(!canvas.getContext)return;
  23.         if(canvas.__loading)return;
  24.         canvas.__loading = this;
  25.         var ctx = canvas.getContext('2d');
  26.         var radius = this.radius;
  27.         var rotators = [{angle:0,radius:1.5},{angle:3/radius,radius:2},{angle:7/radius,radius:2.5},{angle:12/radius,radius:3}];
  28.         var me = this;
  29.         canvas.loadingInterval = setInterval(function(){
  30.           ctx.clearRect(0,0,canvas.width,canvas.height);
  31.           var lineWidth = me.circleLineWidth;
  32.           var center = {x:canvas.width/2 - radius,y:canvas.height/2-radius};
  33.           ctx.beginPath();
  34.           ctx.lineWidth = lineWidth;
  35.           ctx.strokeStyle = me.circleColor;
  36.           ctx.arc(center.x,center.y,radius,0,Math.PI*2);
  37.           ctx.closePath();
  38.           ctx.stroke();
  39.           for(var i=0;i
  40.             var rotatorAngle = rotators[i].currentAngle||rotators[i].angle;
  41.             //在圆圈上面画小圆
  42.             var rotatorCenter = {x:center.x-(radius)*Math.cos(rotatorAngle) ,y:center.y-(radius)*Math.sin(rotatorAngle)};
  43.             var rotatorRadius = rotators[i].radius;
  44.             ctx.beginPath();
  45.             ctx.fillStyle = me.dotColor;
  46.             ctx.arc(rotatorCenter.x,rotatorCenter.y,rotatorRadius,0,Math.PI*2);
  47.             ctx.closePath();
  48.             ctx.fill();
  49.             rotators[i].currentAngle = rotatorAngle+4/radius;
  50.           }
  51.         },50);
  52.       },
  53.       hide:function(){
  54.         var canvas = this.canvas;
  55.         canvas.__loading = false;
  56.         if(canvas.loadingInterval){
  57.           window.clearInterval(canvas.loadingInterval);
  58.         }
  59.         var ctx = canvas.getContext('2d');
  60.         if(ctx)ctx.clearRect(0,0,canvas.width,canvas.height);
  61.       }
  62.     };
  63.    
  64.   
  65.   
  66.    
  67.    


  68.    
  69.    

  70.    


  71.     <script><br> </script>
  72.     var loadingObj = new loading(document.getElementById('canvas'),{radius:8,circleLineWidth:3});
  73.     loadingObj.show();
  74.    
  75.   
复制代码


        演示地址:http://f200-8.bbs.hexun.com/e/111219/loading.htm

        第二个较为简单,在一个圆环上有一个相同圆心相同半径的圆弧在不停的转动。画图的步骤是首先画一个圆环,然后画一个不同颜色相同圆心半径的圆弧,在每次刷新画布时改变圆弧的起始角度。

        这里是案例的演示代码:




  1.   
  2.   loading
  3.   <script><br> </script>
  4.    /*
  5.     html5 loading 鎺т欢
  6.     浣滆€咃細鐜夊紑 鍗氬
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage