首页 > 代码库 > js预加载loading的canvas写法

js预加载loading的canvas写法

2024-08-17 23:25:40   223人阅读

页面html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>不需要页面图片显示加载</title>
<style>
   html{
    background: gray;
   }
   #loading{
   z-index: 200;
   position: fixed;
   top: 50%;
   left: 50%;
   border:1px solid red;
}
#loading-screen {
   display: block;
   position: absolute;
   text-align: center;
   width: 60px;
   height: 60px;
   top: 50%;
   -webkit-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%);
   left: 50%;
   background: white;
   border-radius: 5px;
   z-index: 500;
}
#canvas-font-wrap{
    font-family: ‘微软雅黑‘;
    position:relative;
    height: 60px;
    width:60px;
    line-height: 60px;
    text-align: center;
    color: darkgray;
}
.font-center{
    height: 48px;
    width:48px;
    border:2px solid rgb(223,223,223);
    border-radius: 25px;
    line-height:48px;
    position: absolute;
    left: 4px;
    top:4px;
}

#loading-screen .vip-cvs {
   position: absolute;
   left: 0;
   top: 0;
   -webkit-transform: translate(-25%,-25%) scale(0.5);
   transform: translate(-25%,-25%) scale(0.5);
}
</style>
</head>
<body>
<div id="loading">
   <div id=‘loading-screen‘>
    <div id="canvas-font-wrap"style="">
    <div class="font-center" style="">cpp</div>
    </div>
       <canvas class=‘vip-cvs‘ width=‘120‘ height=‘120‘ id="canvas"></canvas>
   </div>
</div>
<!--//js路径更改自己的路径-->
<script type="text/JavaScript" src="http://www.mamicode.com/js/jQuery.min.js" ></script>
<!--js路径更改自己的路径-->
<script type="text/javascript" src="http://www.mamicode.com/js/loadAnimation.js" ></script>
<script type="text/javascript">
showLoadingScreen();
</script>
</body>
</html>

　　

 

页面加载打圈的js写法：

 

 1 /**
 2 
 3  * Created by chenxiaopeng on 2016/10/13.
 4  */
 5 var loadingHandel = null;
 6 function initLoadingAnimate() {
 7     var step = 0;
 8     var bg = $(‘.vip-cvs‘)[0];
 9     var ctx = bg.getContext(‘2d‘);
10     var imd = null;
11     var circ = Math.PI * 2;
12     var quart = Math.PI / 2;
13     var lineColor = ‘#e5007f‘;
14     var backforward = true;
15 
16 
17     ctx.clearRect(0, 0, 120, 120);
18     ctx.beginPath();
19     ctx.strokeStyle = lineColor;
20     ctx.lineCap = ‘square‘;
21     ctx.closePath();
22     ctx.fill();
23     ctx.lineWidth = 2.8;
24     imd = ctx.getImageData(0, 0, 120, 120);
25     
26     var draw = function(current) {
27         ctx.putImageData(imd,0,0,0,0,120,120);
28         ctx.beginPath();
29         ctx.arc(60, 60, 50, -(quart), ((circ) * current) - quart, backforward);
30         ctx.stroke();
31     }
32     function stepDraw() {
33     //draw(0.5);
34         step += 0.01;
35         draw(step);
36         if (step >= 0.99) {
37             step = 0;
38             if (!backforward) {
39                 backforward = true;
40             } else {
41                 backforward = false;
42             }
43         }
44     }
45     loadingHandel = setInterval(stepDraw, 10);
46 }
47 
48 function clearLoadingAnimation() {
49     clearInterval(loadingHandel);
50 }
51 
52 function showLoadingScreen() {
53     initLoadingAnimate();
54     $(‘#loading‘).show();
55 }
56 
57 function hideLoadingScreen() {
58     clearLoadingAnimation();
59     $(‘#loading‘).hide();
60 }

 

//需要引进jquery，整个页面没有图片，很棒。

js预加载loading的canvas写法


联系
我们