html代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

     </head>

     <body>

         <canvas id="pro" width="400" height="300"></canvas>

     </body>

 </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);

效果如下：

完整代码如下：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         <canvas id="pro" width="400" height="400"></canvas>

         <script>

             (function(){

                 var c=document.getElementById("pro"),

                     pro=0,

                     ctx=c.getContext("2d");

                     //画灰色的圆

                     ctx.beginPath();

                     ctx.arc(200,200,80,0,Math.PI*2);

                     ctx.closePath();

                     ctx.fillStyle='#f6f6f6';

                     ctx.fill();

                     function animate(){

                         requestAnimationFrame(function(){

                             pro=pro+1;

                             drawCricle(ctx,pro);

                             if(pro<60){

                                 animate();

                             }

                         });

                     }

                     function drawCricle(ctx,percent){

                         //画进度环

                         ctx.beginPath();

                         ctx.moveTo(200,200);

                         ctx.arc(200,200,80,Math.PI*0.8,Math.PI*(0.8+2*percent/200));

                         ctx.closePath();

                         ctx.fillStyle='#ff9600';

                         ctx.fill();

                         //画内填充圆

                         ctx.beginPath();

                         ctx.arc(200,200,75,0,Math.PI*2);

                         ctx.closePath();

                         ctx.fillStyle='#fff';

                         ctx.fill();

                           //填充文字

                         ctx.font = "bold 20pt Microsoft YaHei";

                         ctx.fillStyle = '#333';

                         ctx.textAlign = 'center';

                         ctx.textBaseline = 'middle';

                         ctx.moveTo(200, 200);

                         ctx.fillText(pro + '%', 200, 200);

                     }

                     animate();

             }())

         </script>

     </body>

 </html>

使用canvas实现环形进度条的更多相关文章

  1. html5 canvas绘制环形进度条，环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

  2. Canvas实现环形进度条

    Canvas实现环形进度条 直接上代码: <canvas width="200" height="200" >60%</canvas> ...

  3. canvas绘制环形进度条

    <!DOCTYPE html> <html > <head> <meta http-equiv="content-type" conten ...

  4. canvas 绘制环形进度条

    结果: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="U ...

  5. canvas环形进度条

    <style> canvas { border: 1px solid red; margin: 100px; }</style> <canvas id="rin ...

  6. 【css】如何实现环形进度条

    最近团队的童鞋接到了一个有关环形进度条的需求,想要还原一个native的沿环轨迹渐变进度条的效果,看到这个效果的时候,笔者陷入了沉思.. 环形进度条的效果,最先想到的就是使用CSS利用两个半圆的hac ...

  7. 环形进度条的实现方法总结和动态时钟绘制（CSS3、SVG、Canvas）

    缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...

  8. canvas实现半圆环形进度条

    html部分 <canvas id="canvas" width="150" height="150"> <p>抱歉 ...

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

    周末好,今天给大家带来一款接地气的环形进度条组件vue-awesome-progress.近日被设计小姐姐要求实现这么一个环形进度条效果,大体由四部分组成,分别是底色圆环,进度弧,环内文字,进度圆点. ...

随机推荐

  1. mybatis-主配置文件介绍

    mybatis下载地址:http://code.google.com/p/mybatis/ 学习手册地址:http://mybatis.github.io/mybatis-3/zh/index.htm ...

  2. 反转字符串的几种实现（Java）

    反转字符串的几种实现(Java) 首先第一种是利用Java中的类库对象进行反转 //第一种 使用Java类库的diam实现反转 public String reverse(String str){ S ...

  3. Angular2开发拙见

    本文集中讲讲笔者目前使用ng2来开发项目时对其组件的使用的个人的一些拙劣的经验. 先简单讲讲从ng1到ng2框架下组件的职责与地位: ng1中的一大特色--指令,分为属性型.标签型.css类型和注释型 ...

  4. webstorm配置scss环境

    1.下载 Ruby  (安装过程中记得勾选添加到环境变量,安装结束最后可能会弹出一个cmd弹框,可以忽略) 2. cmd安装sass gem install sass 3. cmd检查是否安装 sas ...

  5. oracle sql*plus常用命令

    一.sys用户和system用户Oracle安装会自动的生成sys用户和system用户(1).sys用户是超级用户,具有最高权限,具有sysdba角色,有create database的权限,该用户 ...

  6. C++ static成员变量与static成员函数

    类中的静态成员真是个让人爱恨交加的特性.我决定好好总结一下静态类成员的知识点,以便自己在以后面试中,在此类问题上不在被动. 静态类成员包括静态数据成员和静态函数成员两部分.  一 静态数据成员:  类 ...

  7. hdu1754线段树的单点更新区间查询

    I Hate It Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  8. bzoj4557【JLOI2016】侦查守卫

    这道题对于我来说并不是特别简单,还可以. 更新一下blog 树形DP f[i][j]表示i的子树中,最高覆盖到i向下第j层的最小花费. g[i][j]表示i的子树全部覆盖,还能向上覆盖j层的最小花费. ...

  9. python采用 多进程/多线程/协程 写爬虫以及性能对比，牛逼的分分钟就将一个网站爬下来!

    首先我们来了解下python中的进程,线程以及协程! 从计算机硬件角度: 计算机的核心是CPU,承担了所有的计算任务.一个CPU,在一个时间切片里只能运行一个程序. 从操作系统的角度: 进程和线程,都 ...

  10. python2.7 使用super关键词 报错 TypeError: must be type, not&n

    错误试验代码: class Base(): def meth(self): print "i'm base" class Derived(Base): def meth(self) ...