Canvas 圆形加载进度动画
2017年08月24日作者:井井客整理来源:互联网
圆形加载进度,带动画效果昂。以前我自己也画过一个静态的,感觉还是这个效果好~
原文摘自:http://canvas.migong.org/category/canvas-animation/page/17
代码如下,建议可以看一下原文,里面有解释更多。
<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Canvas 圆形加载进度动画</title> <style type="text/css"> * {margin: 0; padding: 0;} html {width: 100%; height: 100%;} body {width: 100%; height: 100%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;} .splash {position: absolute; z-index: 999; display: table; width: 100%; height: 100%; background-color: #f3f0eb;} .splash > .splash-inner {display: table-cell; text-align: center; vertical-align: middle;} .splash h1,.splash h2,.splash h3 {font-weight: normal;} .splash h3 {display: block; margin-top: 34px; font-size: 18px; color: #666; font-weight: lighter;} .splash .loading-circle {position: relative; width: 204px; height: 204px; margin: auto;} .splash .loading-circle > * {display: block; position: absolute; box-sizing: border-box; border-radius: 102px;} .splash .loading-circle > canvas.bg {z-index: 1; width: 100%; height: 100%; border: 8px solid #ddd ;} .splash .loading-circle > canvas.mask {z-index: 2; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);} .splash .loading-circle > p {z-index: 3; width: 100%; height: 100%; text-align: center; line-height: 204px; font-size: 56px; font-weight: lighter; color: #999;} </style> </head> <body> <div class="splash" id="splash"> <div class="splash-inner"> <h1></h1> <div class="loading-circle" id="loadingCircle"> <p><span id="loadedNum">0</span>%</p> <canvas class="mask" id="loadingProgress" width="204" height="204"></canvas> <canvas class="bg" width="204" height="204"></canvas> </div> </div> </div> <script> var slots={}, c = document.getElementById('loadingProgress'), ctx = c.getContext('2d'); window.hasLoaded = 0; window.loading = false; window.ulp = ulp; function ulp(percent){ window.loading = true; var i = 0, draw = null; draw = setInterval(function(){ //hasLoaded > 100 结束 if (window.hasLoaded > 100) { window.loading = false; clearInterval(draw); draw = null; return true; } if (i <= percent) { //i < percent 执行 d(),percent被传参67。 d(); i++; window.hasLoaded += 1; } else { clearInterval(draw); draw = null; } }, 100); //控制速度 } function d(){ var lp = document.getElementById('loadedNum'); lp.innerHTML = window.hasLoaded; //加载进度数字插入(loadedNum) var loaded = window.hasLoaded * 2 / 100 * Math.PI, //2*PI是结束角度,/100 是完成的百分比 cw = 204, hcw = 102; ctx.clearRect (0,0,cw,cw); //清空矩形,宽/高204 ctx.beginPath(); //开始绘制 //arc创建一个圆形(x,y(x+y是圆的中心点),r(圆的半径),起始角度(0),结束角度(loaded),False = 顺时针 & true = 逆时针) ctx.arc(hcw,hcw,hcw-4, 0, loaded, false); ctx.lineWidth = 8; //线条宽度 ctx.strokeStyle = '#ff6000'; //颜色 ctx.stroke(); } ulp(67); //传参67(百分比) </script> </body> </html>
文章TAG:canvas动画
本文标题:Canvas 圆形加载进度动画
本文链接:http://www.jingjingke.com/c/24296.html
上一篇:Canvas 螺旋线条动画
下一篇:没有了