javascript + html5实现加载动画

来源：互联网发布：java 验证日期格式编辑：程序博客网时间：2024/06/07 00:01

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

<!doctype html>

<html>
    <head>
        <meta http-equiv="content-type" content="GBK"/>
        <title>loading</title>
        <script type="text/javascript">
            /*
             html5 loading 控件

             */
        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 控件      */    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>

0 0