今天写了一个canvas的环形进度条，比较简单，直接贴代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 #canvas { 8 border: 1px solid #000; 9 } 10 </style> 11 </head> 12 <body> 13 <canvas id="canvas" width="300" height="300"></canvas> 14 <script> 15 window.onload = function(){ 16 var canvas = document.getElementById('canvas') 17 var context = canvas.getContext('2d') 18 function draw(option){ 19 // 兼容处理 20 window.reqAnimFrame = (function(){ 21 return window.requestAnimationFrame || 22 window.webkitRequestAnimationFrame || 23 window.mozRequestAnimationFrame || 24 function( callback ){ 25 window.setTimeout(callback, 1000 / 60); 26 }; 27 })(); 28 29 var perc = option.perc || 100; // perc 进度 30 var lColor = option.lColor || "#ccc"; // lColor 进度条颜色 31 var BackColor = option.BackColor || "#000"; // BackColor 背景条颜色 32 var lw = option.lw || 10; // lw 进度条宽度 33 var lwBack = option.lwBack || 20; // lwBack 背景条宽度 34 var fontSize = option.fontSize || "30px"; // fontSize 进度数字大小 35 var callBack = option.callBack; // callBack 完成进度的回调 36 var x = 0; 37 context.lineCap = 'round'; 38 context.font = fontSize+" Arial"; 39 function ready(){ 40 if(x < perc){ 41 context.clearRect(0,0,canvas.width , canvas.height); 42 x++; 43 context.lineWidth = lwBack; 44 context.beginPath() 45 context.strokeStyle = BackColor; 46 context.arc(canvas.width/2, canvas.height/2, 100, 0,2*Math.PI) 47 context.stroke() 48 context.lineWidth = lw; 49 context.beginPath() 50 context.strokeStyle = lColor; 51 context.arc(canvas.width/2, canvas.height/2, 100, 0,x*0.02*Math.PI) 52 context.fillText(x+'%',(canvas.width/2),(canvas.height/2)+10); 53 context.textAlign="center"; 54 context.stroke() 55 reqAnimFrame(ready) 56 }else { 57 callBack && callBack() 58 // 达到目标值之后的回调 59 } 60 } 61 ready() 62 } 63 draw({ 64 fontSize: '50px', 65 BackColor: 'blue', 66 lw:10, 67 perc:100, 68 callBack:function(){ 69 console.log('完成进度动画') 70 } 71 }) 72 } 73 </script> 74 </body> 75 </html>
效果如下
值得说的一点，动画采用的 requestAnimationFrame() 方法还是很不错的，我认为是可以完全取代定时器去完成动画的方法，无论从性能，效果都要比定时器舒服很多，唯一的就是兼容性存在问题，这次只是封装了一个小方法，以后还会再去完善，溜了溜了。