使用canvas實現環形進度條
阿新 • • 發佈：2017-07-06
cti anim 效果 math png utf-8 context request var
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>
使用canvas實現環形進度條