html5 canvas圆形带数字加载进度条动画-百分比进度条加载
第一种方式：
HTML代码为：
<style> html{ width:100%; height: 100%;} body{ width:100%; height: 100%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif} *{ margin: 0; padding: 0;} .splash{ position: absolute; z-index: 999; display: table; width: 100%; height: 100%; background: #f3f0eb;} .splash>.splash-inner{ display: table-cell; text-align: center; vertical-align: middle;} .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>p{ z-index: 3; width: 100%; height: 100%; text-align: center; line-height: 204px; font-size: 56px; font-weight: lighter; color: #999;} .splash .loading-circle>canvas.mask{z-index: 2;/*-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);transform:rotate(-90deg);*/} .splash .loading-circle>canvas.bg {z-index: 1; width: 100%; height: 100%; border: 8px solid #ddd ;} </style> <div class="splash" id="splash"> <div class="splash-inner"> <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>
JS代码为：
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(){ if(window.hasLoaded > 100){ window.loading=false; clearInterval(draw); draw=null; return true; } if(i < percent){ d(); i++; window.hasLoaded+=1; }else{ clearInterval(draw); draw=null; } },10); } function d(){ var lp=document.getElementById('loadedNum'); lp.innerHTML =window.hasLoaded; var loaded=window.hasLoaded *2 /100 *Math.PI,cw=204,hcw=102; ctx.clearRect(0,0,cw,cw); ctx.beginPath(); ctx.arc(hcw,hcw,hcw-4,0,loaded,false); ctx.lineWidth=10; ctx.strokeStyle="#ff6000"; ctx.stroke(); } ulp(67);
本地文章效果为：app/html5canvas/bar_canvas/demo.html
文章来自：http://www.17sucai.com/pins/13576.html
第二种方式：
HTML代码为：
<style> html{ width:100%; height: 100%;} body{ width:100%; height: 100%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif} *,::before,::after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:transparent; margin: 0; padding: 0;} .splash canvas{ position: absolute;} .splash{ width: 204px; height: 204px; margin: 100px auto; position: relative;} .splash canvas.bg {z-index: 1; width: 100%; height: 100%; border: 40px solid #f8cf73 ; border-radius: 100%;} #myCanvas01{left: 0px;top: 0px;z-index: 30;} #loadingProgress{ border-radius: 100%;width: 100%; z-index: 2;-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);transform:rotate(30deg);} #myCanvas02{ left: 0; top: 0; z-index: 30;} </style> <div class="splash" id="splash"> <canvas id="loadingProgress" width="204" height="204">抱歉！浏览器不支持。</canvas> <canvas id="myCanvas01" width="204" height="204">抱歉！浏览器不支持。</canvas> <canvas id="myCanvas02" width="204" height="204">抱歉！浏览器不支持。</canvas> <canvas class="bg" width="204" height="204">抱歉！浏览器不支持。</canvas> </div>
JS代码为：
<script> zhuValue=13+1; keValue=10+1; var data=Math.round(keValue / (zhuValue + keValue)*100); //alert(data); var slots={},c=document.getElementById('loadingProgress'),ctx=c.getContext('2d'); var c1=document.getElementById('myCanvas01'),ctx1=c1.getContext('2d'); var c2=document.getElementById('myCanvas02'),ctx2=c2.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(){ if(window.hasLoaded > 100){ window.loading=false; clearInterval(draw); draw=null; return true; } if(i < percent){ d(); initPoint(); i++; window.hasLoaded+=1; }else{ clearInterval(draw); draw=null; } },10); } function d(){ //var lp=document.getElementById('loadedNum'); //lp.innerHTML =window.hasLoaded; var loaded=window.hasLoaded *2 /100 *Math.PI,cw=204,hcw=102; ctx.clearRect(0,0,cw,cw); ctx.beginPath(); ctx.arc(hcw,hcw,hcw-20,0,loaded,false); ctx.lineWidth=41; ctx.strokeStyle="#9ab5ec"; ctx.stroke(); } function initPoint(){ ctx1.beginPath(); ctx1.moveTo(154,14); ctx1.lineTo(160,5); ctx1.lineTo(180,5); ctx1.strokeStyle='#f8cf73'; ctx1.fillText('主胜',180,10,80); ctx1.fillStyle='#f8cf73'; ctx1.stroke(); //下边横线 ctx2.beginPath(); ctx2.moveTo(154,191); ctx2.lineTo(160,200); ctx2.lineTo(180,200); ctx2.strokeStyle='#9ab5ec'; ctx2.fillText('客胜',180,200,80); ctx2.fillStyle='#9ab5ec'; ctx2.stroke(); } ulp(data); </script>
本地效果为：app/html5canvas/bar_canvas/demo2.html
第三种方式：
HTML代码为：
1 <canvas id="pie1" width="200px" height="200px"></canvas> 2 <canvas id="pie2"></canvas> 3 4 <script src="js/canvas.js"></script> 5 <script type="text/javascript"> 6 new Chart("pie1").ratePie(98); 7 8 var pie=new Chart("pie2"); 9 pie.ratePie(50); 10 </script>
JS代码为：
1 window.Chart=function(domId){ 2 var canvas = document.getElementById(domId); 3 var ctx = canvas.getContext("2d"); 4 var W = canvas.width; 5 var H = canvas.height; 6 var deg=0,new_deg=0,dif=0; 7 var text,text_w; 8 var R=W<H?W:H;//先默认环半径为canvas宽度 9 var bgR=(R-R/3)/2; //内环背景半径 10 var linkW=R/2 - bgR;//环宽度=(W/2 - 内半径) 11 var inW=linkW/3;//内环宽度=环宽度*1/3 12 var outW=linkW*2/3;//外环宽度=环宽度*2/3 13 var inR=bgR+inW/2;//内环半径=内半径+内环宽度/2 14 var outR=bgR+inW+outW/2;//外环半径=内半径+内环宽度+外环宽度/2 15 var $this=this; 16 $this.ratePieNoAnimation=function(number){ 17 deg=360*number/100; 18 //底色大 19 ctx.clearRect(0,0,W,H); 20 ctx.beginPath(); 21 var grd = ctx.createLinearGradient(0,H, W, 0);//颜色渐变的起始坐标和终点坐标 22 grd.addColorStop(0, "#74DE1C"); 23 grd.addColorStop(0.3,"#9DDE12"); 24 grd.addColorStop(0.6,"#B2ED2E"); 25 grd.addColorStop(1,"#CBF76C"); 26 ctx.strokeStyle = grd;//生成的颜色块赋值给样式 27 ctx.lineWidth=outW; 28 ctx.arc(W/2,H/2,outR,0,Math.PI*2,false); 29 ctx.stroke(); 30 //底色小 31 ctx.beginPath(); 32 var grd=ctx.createLinearGradient(W,0,0,H); 33 grd.addColorStop(0,"#74DE1C"); 34 grd.addColorStop(0.3,"#9DDE12"); 35 grd.addColorStop(0.6,"#B2ED2E"); 36 grd.addColorStop(1,"#CBF76C"); 37 ctx.strokeStyle=grd; 38 ctx.lineWidth=inW; 39 ctx.arc(W/2,H/2,inR,0,Math.PI*2,false); 40 ctx.stroke(); 41 42 //圆心背景 43 ctx.beginPath(); 44 ctx.fillStyle="#D9E5E5"; 45 ctx.arc(W/2,H/2,bgR,0,Math.PI*2,false); 46 ctx.fill(); 47 48 //外层 49 var r=deg*Math.PI/180; 50 ctx.beginPath(); 51 var grd=ctx.createLinearGradient(0,H,W,0); 52 grd.addColorStop(0,"#8BEAF5"); 53 grd.addColorStop(0.3,"#22A4D4"); 54 grd.addColorStop(0.6,"#0B72BD"); 55 grd.addColorStop(1,"#0A5DA0"); 56 ctx.strokeStyle=grd; 57 ctx.lineWidth=outW; 58 ctx.arc(W/2,H/2,outR,0-90*Math.PI/180,r-90*Math.PI/180,false); 59 ctx.stroke(); 60 //内层 61 ctx.beginPath(); 62 var grd = ctx.createLinearGradient(W, 0, 0,H); 63 grd.addColorStop(0, "#8BEAF5"); 64 grd.addColorStop(0.3, "#22A4D4"); 65 grd.addColorStop(0.6, "#0B72BD"); 66 grd.addColorStop(1, "#0A5DA0"); 67 ctx.strokeStyle = grd; 68 ctx.lineWidth=inW; 69 ctx.arc(W/2,H/2,inR,0-90*Math.PI/180,r-90*Math.PI/180,false); 70 ctx.stroke(); 71 72 ctx.fillStyle="#000"; 73 ctx.font="bold "+R/4+"px Arial"; 74 text=Math.floor(deg/360*100)+"%"; 75 text_w =ctx.measureText(text).width; 76 ctx.fillText(text,W/2 - text_w/2,H/2+R/10); 77 78 }; 79 $this.ratePie=function(number){ 80 var i=0; 81 var t= setInterval(function(){ 82 if(i == number){ 83 clearInterval(t); 84 }else{ 85 number > 0 ? i++: i--; 86 } 87 $this.ratePieNoAnimation(i); 88 if(i >100 || i < -100){//如果数字太大，取消动画效果 89 $this.ratePieNoAnimation(number); 90 clearInterval(t); 91 } 92 },2000/(number >0 ? number : -number)); 93 } 94 }
本地效果为：app/html5canvas/progress/demo.html
线上效果为：http://www.jq22.com/jquery-info8143
第四种方式：
文章来自：http://www.17sucai.com/pins/11074.html
