首页 > 代码库 > js预加载loading的canvas写法
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="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写法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。