标签：path logs html move tle width head 分享 div
html代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <canvas id="pro" width="400" height="300"></canvas> 9 </body> 10 </html>
js代码：
第一步：
var c=document.getElementById("pro"), pro=0, ctx=c.getContext("2d"); //画灰色的圆 ctx.beginPath(); ctx.arc(200,200,190,0,Math.PI*2); ctx.closePath(); ctx.fillStyle=‘#e3eaf2‘; ctx.fill();
效果图如下：
第二步：
function drawCricle(ctx,percent){ //画进度环 ctx.beginPath(); ctx.moveTo(200,200); ctx.arc(200,200,190,Math.PI*0.8,Math.PI*(0.8+2*percent/200)); ctx.closePath(); ctx.fillStyle=‘#ff4b88‘; ctx.fill(); //画内填充圆 ctx.beginPath(); ctx.arc(200,200,175,0,Math.PI*2); ctx.closePath(); ctx.fillStyle=‘#fff‘; ctx.fill(); } drawCricle(ctx,60);//执行这个函数
效果图如下：
第三步：让它动起来
function animate(){ requestAnimationFrame(function(){ pro=pro+1; drawCricle(ctx,pro); if(pro<60){ animate(); } }); }
如果需加入百分比文字：
//将这段代码加到drawCricle函数里面 ctx.font = "bold 20pt Microsoft YaHei"; ctx.fillStyle = ‘#333‘; ctx.textAlign = ‘center‘; ctx.textBaseline = ‘middle‘; ctx.moveTo(200, 200); ctx.fillText(process + ‘%‘, 200, 200);
效果如下：
完整代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <canvas id="pro" width="400" height="400"></canvas> 9 <script> 10 (function(){ 11 var c=document.getElementById("pro"), 12 pro=0, 13 ctx=c.getContext("2d"); 14 15 //画灰色的圆 16 ctx.beginPath(); 17 ctx.arc(200,200,80,0,Math.PI*2); 18 ctx.closePath(); 19 ctx.fillStyle=‘#f6f6f6‘; 20 ctx.fill(); 21 22 function animate(){ 23 requestAnimationFrame(function(){ 24 pro=pro+1; 25 drawCricle(ctx,pro); 26 if(pro<60){ 27 animate(); 28 } 29 }); 30 } 31 32 function drawCricle(ctx,percent){ 33 //画进度环 34 ctx.beginPath(); 35 ctx.moveTo(200,200); 36 ctx.arc(200,200,80,Math.PI*0.8,Math.PI*(0.8+2*percent/200)); 37 ctx.closePath(); 38 ctx.fillStyle=‘#ff9600‘; 39 ctx.fill(); 40 41 //画内填充圆 42 ctx.beginPath(); 43 ctx.arc(200,200,75,0,Math.PI*2); 44 ctx.closePath(); 45 ctx.fillStyle=‘#fff‘; 46 ctx.fill(); 47 48 //填充文字 49 ctx.font = "bold 20pt Microsoft YaHei"; 50 ctx.fillStyle = ‘#333‘; 51 ctx.textAlign = ‘center‘; 52 ctx.textBaseline = ‘middle‘; 53 ctx.moveTo(200, 200); 54 ctx.fillText(pro + ‘%‘, 200, 200); 55 } 56 animate(); 57 }()) 58 </script> 59 </body> 60 </html>
标签：path logs html move tle width head 分享 div
原文地址：http://www.cnblogs.com/Mrrabbit/p/7126838.html
