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

最新推荐文章于 2024-03-17 20:13:34 发布

Holdmyfire_enen

最新推荐文章于 2024-03-17 20:13:34 发布

阅读量291

点赞数

分类专栏：前端文章标签： canvas 遮罩层 html

本文链接：https://blog.csdn.net/agoni_xiaoen/article/details/59480663

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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.οnlοad=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>