使用canvas实现环形进度条

news/2024/7/17 4:10:47

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>