loading页面(2017.12.13)

最新推荐文章于 2024-07-03 09:16:08 发布

原创最新推荐文章于 2024-07-03 09:16:08 发布 · 330 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

萌新的前端进击之路专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个使用HTML5 Canvas API实现的动态加载界面示例。通过定时更新画布内容，实现了旋转的圆形图案和渐进式的加载进度条效果。

利用canvas 画布API写的一个简单的loading界面，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>loading</title>
</head>
<style type="text/css">
    *{
   margin:0;
   padding:0;
   }
    canvas{
   display:block;
   background:#000000;
   }
   </style>
<body>
<canvas id="loading"></canvas>
</body>
<script type="text/javascript">
    var canvas = document.getElementById("loading");
   canvas.width = innerWidth;
   canvas.height = innerHeight;

   var ctx = canvas.getContext("2d");
   var width = innerWidth;
   var height = innerHeight;
   var timer = null;
   var speed = 5;
   var loading = 0.5*width-150;
   var count = 0;
   var deg = new Array(0,300,265,180,165,105);
   var rad = new Array(0.1*height,0.08*height,0.06*height);
   onload = function(){ timer = setInterval("draw()",100); };
   window.onresize = function(){
                                   clearInterval(timer);
                                   canvas.width = innerWidth;
                                   canvas.height = innerHeight;
                                   width = innerWidth;
                                   height = innerHeight;
                                   count = 0;
                                   rad[0] = 0.1*height;
                                   rad[1] = 0.08*height;
                                   rad[2] = 0.06*height;
                                   loading = 0.5*width-150;
                                   timer = setInterval("draw()",100);
                                  }


   function draw(){
   ctx.strokeStyle="#00ffff";   //画笔颜色必须每次都规定，否则默认为黑色
   /*中心圆圈*/
   ctx.clearRect(0,0,width,0.64*height);
   for(var j=0,k=0;j<3;j++)
   {
        ctx.beginPath();
        ctx.arc(0.5*width,0.5*height,rad[j],dToR(deg[k]),dToR(deg[k+1]),false);
        ctx.stroke();
       k += 2;
   }
   for(var i=0;i<7;i++){ deg[i] += speed; }
   /*loading字体和进度*/
   var percent = (count++)+"%";
   ctx.clearRect(0,0.66*height,width,height);
   ctx.fillStyle = "#00ffff";
   ctx.font = "italic 1.2em serif";
   ctx.fillText("Loading...",0.5*width-40.5,0.5*height+7.5);
   ctx.fillText(percent,0.5*width-10,0.68*height);
   /*进度条*/
   ctx.beginPath();
   ctx.arc(0.5*width-150,0.65*height,0.01*height,dToR(90),dToR(270),false);
   ctx.arc(0.5*width+150,0.65*height,0.01*height,dToR(270),dToR(90),false);
   ctx.moveTo(0.5*width-150,0.66*height);
   ctx.lineTo(0.5*width+150,0.66*height);
   ctx.stroke();
   ctx.beginPath();
   ctx.arc(loading,0.65*height,0.01*height,0,2*Math.PI,true);
   ctx.closePath();
   ctx.fill();
   loading += 3;
   if(loading == 0.5*width+153) /*153是为了把最后的一点画上*/
    {
         clearInterval(timer);
       alert("page is completely   loaded");
       }
   }
   function dToR(degree){
   if(degree>360)
        return ((degree-360)*Math.PI)/180;
       else
            return (degree*Math.PI)/180;
           }
</script>

</html>

大致效果如下：