码迷,mamicode.com
首页 > 其他好文 > 详细

使用canvas实现环形进度条

时间:2017-07-06 16:59:11      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:path   logs   html   move   tle   width   head   分享   div   

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实现环形进度条

标签:path   logs   html   move   tle   width   head   分享   div   

原文地址:http://www.cnblogs.com/Mrrabbit/p/7126838.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!