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

2022-10-07 20:55:05

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

setInterval()

canvas

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

上图：

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

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

<div style=" padding-left: 600px;" id=‘loading_panl’>

                <lable id="lbl_Info"></lable>

                <canvas id="test" width=200 height=200></canvas>

</div>

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

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

 <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帧吧)　　

帧  也就是你一次运动的距离

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

每个人的审美都不一样我自己觉得这效果我看不下去，希望你能玩出更多的花样

码农公寓

相关文章