js预加载loading的canvas写法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js预加载loading的canvas写法相关的知识，希望对你有一定的参考价值。
页面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="../js/jQuery.min.js" ></script>
<!--js路径更改自己的路径-->
<script type="text/javascript" src="../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写法的主要内容，如果未能解决你的问题，请参考以下文章
关于js----------------分享前端开发常用代码片段