使用canvas实现环形进度条

Posted 2020-09-27 兔子先生

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用canvas实现环形进度条相关的知识，希望对你有一定的参考价值。

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实现环形进度条的主要内容，如果未能解决你的问题，请参考以下文章

iOS 环形下载进度条

用初中数学知识撸一个canvas环形进度条

h5 Canvas实现圆形时间倒计时进度条

实现环形进度条的几种方法

iOS圆环，环形渐变进度条的封装