利用canvas绘制正在加载的动画

来源：互联网发布：幽魂增幅数据编辑：程序博客网时间：2024/05/24 08:33

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title>loading</title>
</head>
<body style="overflow: hidden;background-color: rgba(0,0,0,0.1);">
   <canvas id="loading">
       您的浏览器不支持canvas
   </canvas>

   <script type="text/javascript" charset="utf-8" async defer>
       window.onload=function () {
           var c = document.getElementById("loading");
           var ctx = c.getContext('2d');
           c.width = window.innerWidth;
           c.height = window.innerHeight;
           var cx = c.width/2,
               cy = c.height/2,
               radius = 30;
           var r = [3,4,4.5,5,6,7];
            var angle = [10,25,45,65,90,120];
            var alpha = [0.25,0.35,0.45,0.65,0.8,1];
            var x=[],y=[];

           function blueCircle(){
               x=[];
               y=[];
               for(var i = 0; i < r.length; i ++){
                   if(angle[i]>360)
                       angle[i] = 0;
                    ctx.beginPath();
                    ctx.fillStyle = "rgba(125,125,255,"+alpha[i]+")";
                    x.push( cx + radius*Math.cos(angle[i]*Math.PI/180));
                    y.push( cy + radius*Math.sin(angle[i]*Math.PI/180));
                    ctx.arc(x[i],y[i],r[i],0,2*Math.PI, true);
                    ctx.closePath();
                    ctx.fill();
                    angle[i] += 5;
                }
           }
           // requestAnimationFrame根据浏览器刷新频率循环
           (function draw(){
               window.requestAnimationFrame(draw);
               ctx.clearRect(0,0,c.width,c.height);
               blueCircle();
           }())
       }
   </script>
</body>
</html>

0 0