canvas 环形进度条

　　今天写了一个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() 方法还是很不错的，我认为是可以完全取代定时器去完成动画的方法，无论从性能，效果都要比定时器舒服很多，唯一的就是兼容性存在问题，这次只是封装了一个小方法，以后还会再去完善，溜了溜了。