Html5 loading 来了

Html5在移动设备上表现抢眼，几乎所有稍微高端一点的设备（乔帮主的iPad，iPhone和Andriod的平板手机等）的浏览器都支持Html5。而且据我个人的测试这些支持html5的设备对canvas标签的支持是相当的好。

所以就看了一点html5的东东，并研究了一下canvas标签的用法。如果你从来没有用过canvas标签，请参考Html5 canvas cheat sheet。

大家都知道web2.0以来大量的使用ajax，loading的小图标也有很多很多种，甚至还有专门提供loading图片的网站。所以我就想能不能让html5解决一下这个以前用gif文件解决的问题。没想到非常的简单，只用了不到一小时的时间就搞定了两个，而且这样做出来的loading图标是可定制的，既可以定制颜色，也可以定制大小等属性。

废话少叙，我们先来看下这两个loading图标的效果，注意，如果你用的是PC，请使用Firefox，Opera或者IE9看此效果。

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

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="GBK"/>
    <title>loading</title>
    <script type="text/javascript">
    /*
    html5 loading 控件
    作者：玉开 博客：http://www.cnblogs.com/yukaizhao/
    发布或使用此控件，请保留作者声明
    */
    function loading(canvas,options){
      this.canvas = canvas;
      if(options){
        this.radius = options.radius||12;
        this.circleLineWidth = options.circleLineWidth||4;
        this.circleColor = options.circleColor||'lightgray';
        this.dotColor = options.dotColor||'gray';
      }else{      
        this.radius = 12;
        this.circelLineWidth = 4;
        this.circleColor = 'lightgray';
        this.dotColor = 'gray';
      }
    }
    loading.prototype = {
      show:function (){
        var canvas = this.canvas;
        if(!canvas.getContext)return;
        if(canvas.__loading)return;
        canvas.__loading = this;
        var ctx = canvas.getContext('2d');
        var radius = this.radius;      
        var rotators = [{angle:0,radius:1.5},{angle:3/radius,radius:2},{angle:7/radius,radius:2.5},{angle:12/radius,radius:3}];      
        var me = this;
        canvas.loadingInterval = setInterval(function(){
          ctx.clearRect(0,0,canvas.width,canvas.height);         
          var lineWidth = me.circleLineWidth;
          var center = {x:canvas.width/2 - radius,y:canvas.height/2-radius};          
          ctx.beginPath();
          ctx.lineWidth = lineWidth;
          ctx.strokeStyle = me.circleColor;
          ctx.arc(center.x,center.y,radius,0,Math.PI*2);
          ctx.closePath();
          ctx.stroke();
          for(var i=0;i<rotators.length;i++){        
            var rotatorAngle = rotators[i].currentAngle||rotators[i].angle;            
            //在圆圈上面画小圆
            var rotatorCenter = {x:center.x-(radius)*Math.cos(rotatorAngle) ,y:center.y-(radius)*Math.sin(rotatorAngle)};            
            var rotatorRadius = rotators[i].radius;
            ctx.beginPath();
            ctx.fillStyle = me.dotColor;
            ctx.arc(rotatorCenter.x,rotatorCenter.y,rotatorRadius,0,Math.PI*2);
            ctx.closePath();
            ctx.fill();
            rotators[i].currentAngle = rotatorAngle+4/radius;
          }
        },50);
      },
      hide:function(){
        var canvas = this.canvas;
        canvas.__loading = false;
        if(canvas.loadingInterval){
          window.clearInterval(canvas.loadingInterval);
        }
        var ctx = canvas.getContext('2d');
        if(ctx)ctx.clearRect(0,0,canvas.width,canvas.height);
      }
    };
     
    </script>
  </head>
  <body>
    <canvas id="canvas" width="300" height="100" style="border:1px solid #69c"></canvas>
    <p>
    <input type="button" onclick="loadingObj.hide()" value="HideLoading"/>
    <input type="button" onclick="loadingObj.show()" value="showLoading"/>
    </p>
    <script>
    var loadingObj = new loading(document.getElementById('canvas'),{radius:8,circleLineWidth:3});
    loadingObj.show();
    </script>
  </body>
</html>

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

<!doctype html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=gbk"/>
  <title>loading</title>
  <script>
   /*
    html5 loading 控件
    作者：玉开 博客：http://www.cnblogs.com/yukaizhao/
    发布或使用此控件，请保留作者声明
    */
    function loading(canvas,options){
      this.canvas = canvas;
      if(options){
        this.radius = options.radius||12;
        this.circleLineWidth = options.circleLineWidth||4;
        this.circleColor = options.circleColor||'lightgray';
        this.moveArcColor = options.moveArcColor||'gray';
      }else{      
        this.radius = 12;
        this.circelLineWidth = 4;
        this.circleColor = 'lightgray';
        this.moveArcColor = 'gray';
      }
    }
    loading.prototype = {
      show:function (){
        var canvas = this.canvas;
        if(!canvas.getContext)return;
        if(canvas.__loading)return;
        canvas.__loading = this;
        var ctx = canvas.getContext('2d');
        var radius = this.radius;      
        var me = this;
        var rotatorAngle = Math.PI*1.5;
        var step = Math.PI/6;
        canvas.loadingInterval = setInterval(function(){
          ctx.clearRect(0,0,canvas.width,canvas.height);         
          var lineWidth = me.circleLineWidth;
          var center = {x:canvas.width/2 - radius,y:canvas.height/2-radius};          
          ctx.beginPath();
          ctx.lineWidth = lineWidth;
          ctx.strokeStyle = me.circleColor;
          ctx.arc(center.x,center.y,radius,0,Math.PI*2);
          ctx.closePath();
          ctx.stroke();
          //在圆圈上面画小圆
          ctx.beginPath();
          ctx.strokeStyle = me.moveArcColor;
          ctx.arc(center.x,center.y,radius,rotatorAngle,rotatorAngle+Math.PI*.45);
          ctx.stroke();
          rotatorAngle+=step;
          
        },50);
      },
      hide:function(){
        var canvas = this.canvas;
        canvas.__loading = false;
        if(canvas.loadingInterval){
          window.clearInterval(canvas.loadingInterval);
        }
        var ctx = canvas.getContext('2d');
        if(ctx)ctx.clearRect(0,0,canvas.width,canvas.height);
      }
    };
     
    </script>
  </head>
  <body>
    <canvas id="canvas" width="300" height="100" style="border:1px solid #69c">您的浏览器不支持html5哟</canvas>
    <p>
    <input type="button" onclick="loadingObj.hide()" value="HideLoading"/>
    <input type="button" onclick="loadingObj.show()" value="showLoading"/>
    </p>
    <script>
    var loadingObj = new loading(document.getElementById('canvas'),{radius:8,circleLineWidth:3});
    loadingObj.show();
    </script>
  </body>
</html>

目前从移动设备对Html5的支持来看，html5大有可为。

天下大势，合久必分，分久必和。PC开发时web应用在很大程度上统一了客户端程序；而现在移动开发使用不同的系统不同的语言，将来大多数应用必然会统一到一种语言。这种语言必然是html5+javascript.

posted @ 2011-12-19 18:05 玉开阅读(11767) 评论(14) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架

历史上的今天：
2009-12-19 用一行代码让w3wp进程崩溃，如何查找w3wp进程崩溃的原因

公告

转载请保留链接

OutOfMemory.CN

昵称：玉开
园龄： 19年4个月
荣誉：推荐博客
粉丝： 1484
关注： 44

+加关注

2011年12月

日

一

二

三

四

五

六

玉开Sir的技术博客

穷则变，变则通，通则久寂寞平淡

Html5 loading 来了

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类 (482)

随笔档案 (320)

玉开的友链

阅读排行榜

评论排行榜

推荐排行榜

最新评论

玉开Sir的技术博客

穷则变，变则通，通则久 寂寞平淡

Html5 loading 来了

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

随笔分类 (482)

随笔档案 (320)

玉开的友链

阅读排行榜

评论排行榜

推荐排行榜

最新评论

穷则变，变则通，通则久寂寞平淡