HTML5 绘制简单圆形 loading. . . .

现在有很多的 loading 组件 什么js 等等 闲来没事就写一个 H5的 loading
有很多的Loading 是一张张图片 js 控制的
有了 canvas的 出现 你就可以体验不同之处了
自己效仿前人的做法去看两种的效率 和占用的资源 chrome=>更多工具=>资源管理器
Canvas : 初期比图片占用大一点，能接受， 后面会降下来， 而且一直稳定。
图片+js: 初期效果满意 越到后面 资源占用越多 。
<只是画圆 如果你想要图片 也是可以的 后文会给介绍>
我们都知道 HTML 5里面的 canvas 是一个矩形 你可以做的事情有很多 只要在这个矩形里面就行 。
原理： 在一个canvas 里面循环的去画弧 要想圆弧连贯就要控制每一次擦除和绘制的间隔 ；
你要是做图片的话 就想想什么帧咯 一秒运动多少像素比较好 连贯… …
需要用到的东西 有

• setInterval()

  canvas

ajax（这东西提示一个思路就行了）

下面我们来上图吧 ：

这就是要绘制的布置，然后现在可以做点事情了。

由于是简单示例 就不做的太华丽了，还是上代码吧。

CSS Code:
#container {
            margin: 20px;
            width: 200px;
             height: 200px;
            position: relative;
        }
其实这段加不加也没事  谁让自己做的是低配的版本（高配的就是图片了 要把图片动起来就要做动画了）

现在就要创建一个 canvas 画布来装载 我们绘制的东西了

HTML Code:

<!-- 这种东西 大家应该都会调吧 适应不同屏幕的需求-->
<div style=" padding-left: 600px;" id=‘loading_panl’> 
                <lable id="lbl_Info"></lable>
                <canvas id="test" width=200 height=200></canvas>
</div>

毕竟手机啊 什么的都是在页面的中间去显示loading 然后加载出来需要的素材

画布有了 我们就该开始绘画了

JS Code:
<script>
var deg = 0;  //全局变量 用来存放 canvas 绘制的角度
    var test = function(deg,test){  //角度、 canvasid

    //获取画布 对象 
        var canvas2d = document.getElementById("test").getContext("2d");        
   //canvas绘制圆形进度
        var r = deg*Math.PI/180;   
   //绘制文字  filltext( text，x,y)
         canvas2d.fillText("正在玩命加载中. . . . ",65,140);
   //填充颜色
        canvas2d.fillStyle = "#B2DFF5"; 
   //由于想让圆形动起来  就要一直擦除 重绘
   // 区域自己控制一下 
   //手机需要在有限的屏幕中做很多事情  还是精确到像素吧（有残留的一点点没清掉  请将像素加上 0.5）
        canvas2d.clearRect(0,0,200,122);   
        //开始绘制
        canvas2d.beginPath();          
        //canvas的外圆颜色
        canvas2d.strokeStyle = "#84F2ED"; 
        //圆外框的宽度 别太宽 有点恶心
        canvas2d.lineWidth = 2.5; 
        //canvas绘制弧形
        canvas2d.arc(100,100,20,0-90*Math.PI/180,r-90*Math.PI/180,false); 
        canvas2d.fill();
        canvas2d.stroke();
        canvas2d.closePath();       
    };
//使用定时器让html5 canvas绘制圆形进度动起来
    //此时你可以使用 ajax 来做请求了 
Example:
    $.ajax({
        url:"",
        data:{},
        success(data)
        {
             // clearInterval(t);
            //隐藏之前那个DIV咯
        },
        error:
        {
            // 提示页面那个lable 提示加载失败的原因 <要分手的时候 理由即使牵强都没办法>
        }

})

    var t = setInterval(function(){
        //循环给 圆弧加角度 
        //如果你需要快就加的多一点吧 
        deg+=2; 
        //调用绘制方法
        test(deg);
        //转一圈还是N圈就看你的喜好了。
         if(deg>=365){

            deg=0;
          } 
         },20);
</script>

现在 就来说说图片的 laoding 怎么做吧

从图中 可以选择两种方式

如果你是选择 上下动 那就是选择 黄色区域框
这时候 你就要 设置一个最高点 和一个最低点 用来做图片的上下波动 的区域
如果你是选择 左右动 那就是选择 蓝色区域框
这时候 你就要 设置一个最左点 和一个最右点 用来做图片的左右滑动的零界点
图片的 运动 就是 每间隔 多少毫秒清除 重绘 (电影最基础是一秒24帧 那就用个25帧吧)

每次运动的像素= 总像素数 / Time ( 也就是你想 一秒动多少下)

同上咯 你可以当你在点击 search 的时候去触发 你的loading 方法
原理说清楚了 按理说的确是应该上代码的 ，关于图片的此效果 这时候就用一张效果图来告诉你们吧。

毕竟每个人的审美不一样 颜色自己调 速度也是自己调就好了 ，你可以玩出更多花样！！！

在资源里面会附上一本好书 javascrupt+canvas 动画基础