<!DOCTYPE html>

 <html >

 <head>

     <meta http-equiv="content-type" content="text/html" charset="utf-8">

     <meta name="author" content="xuyunfei">

     <meta name="description" content="">

     <meta name="keywords" content="test,html">

     <title>环形进度条</title>

 </head>

 <body>

 </br></br></br></br>

 <div style="width:300px; height:300px; margin:20px auto">

      <canvas id="canvas" width="300" height="300">

         <p>抱歉，您的浏览器不支持canvas</p>

      </canvas>

 </div>

 <script type="text/javascript">

     function toCanvas(id ,progress){

                 // canvas进度条

                 var canvas = document.getElementById(id),

                 ctx = canvas.getContext("2d"),

                 percent = progress,  //最终百分比

                 circleX = canvas.width / 2,  //中心x坐标

                 circleY = canvas.height / 2,  //中心y坐标

                 radius = 100, //圆环半径

                 lineWidth = 5,  //圆形线条的宽度

                 fontSize = 20; //字体大小

                  //两端圆点

                 // function smallcircle1(cx, cy, r) {

                 //     ctx.beginPath();

                 //     //ctx.moveTo(cx + r, cy);

                 //     ctx.lineWidth = 1;

                 //     ctx.fillStyle = '#06a8f3';

                 //     ctx.arc(cx, cy, r,0,Math.PI*2);

                 //     ctx.fill();

                 // }

                 //  function smallcircle2(cx, cy, r) {

                 //      ctx.beginPath();

                 //      //ctx.moveTo(cx + r, cy);

                 //      ctx.lineWidth = 1;

                 //      ctx.fillStyle = '#00f8bb';

                 //      ctx.arc(cx, cy, r,0,Math.PI*2);

                 //      ctx.fill();

                 //  }

                  //画圆

                  function circle(cx, cy, r) {

                      ctx.beginPath();

                      //ctx.moveTo(cx + r, cy);

                      ctx.lineWidth = lineWidth;

                      ctx.strokeStyle = '#eee';

                      ctx.arc(cx, cy, r, 0, (Math.PI*2),true);

                      ctx.stroke();

                  }

                  //画弧线

                  function sector(cx, cy, r, startAngle, endAngle, anti) {

                      ctx.beginPath();

                      //ctx.moveTo(cx, cy + r); // 从圆形底部开始画

                      ctx.lineWidth = lineWidth;

                      // 渐变色 - 可自定义

                     //  var linGrad = ctx.createLinearGradient(

                     //      circleX-radius-lineWidth, circleY, circleX+radius+lineWidth, circleY

                     //  );

                     //  linGrad.addColorStop(0.0, '#06a8f3');

                      //linGrad.addColorStop(0.5, '#9bc4eb');

                     //  linGrad.addColorStop(1.0, '#00f8bb');

                     //  ctx.strokeStyle = linGrad;

                      ctx.strokeStyle = 'red';

                       //圆弧两端的样式

                      ctx.lineCap = 'round';

                      //圆弧

                     //  ctx.arc(

                     //      cx, cy, r,

                     //      -1.5,

                     //      -1.5 + endAngle/100 * (Math.PI*5/3),

                     //      false

                     //  );

                      ctx.arc(

                          cx, cy, r,

                          (Math.PI*-1/2),

                          (Math.PI*-1/2) + endAngle/100 * (Math.PI*2),

                          false

                      );

                      ctx.stroke();

                  }

                   //刷新

                  function loading() {

                      if (process >= percent) {

                         //  clearInterval(circleLoading);

                         process = 0.0;

                      }

                       //清除canvas内容

                      ctx.clearRect(0, 0, circleX * 2, circleY * 2);

                     //中间的字

                      ctx.font = fontSize + 'px April';

                      ctx.textAlign = 'center';

                      ctx.textBaseline = 'middle';

                      ctx.fillStyle = '#999';

                      ctx.fillText(parseFloat(process).toFixed(0) + '%', circleX, circleY);    

                      //圆形

                      circle(circleX, circleY, radius);

                       //圆弧

                      sector(circleX, circleY, radius, (Math.PI*-1/2), process);

                      //两端圆点

                     //  smallcircle1(150+Math.cos(2*Math.PI/360*120)*100, 150+Math.sin(2*Math.PI/360*120)*100, 5);

                     //  smallcircle2(150+Math.cos(2*Math.PI/360*(120+process*3))*100, 150+Math.sin(2*Math.PI/360*(120+process*3))*100, 5);

                      //控制结束时动画的速度

                     //  if (process / percent > 0.90) {

                     //      process += 0.30;

                     //  } else if (process / percent > 0.80) {

                     //      process += 0.55;

                     //  } else if (process / percent > 0.70) {

                     //      process += 0.75;

                     //  } else {

                          process += 1.0;

                     //  }

                  }

                  var process = 0.0;  //进度

                  var circleLoading = window.setInterval(function () {

                      loading();

                  }, 1000);

             }

             //第二部分，调用封装好的代码：

             toCanvas('canvas',100);

         </script>

     </body>

 </html>

canvas绘制环形进度条的更多相关文章

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

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

  2. canvas 绘制环形进度条

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

  3. canvas绘制圆形进度条（或显示当前已浏览网页百分比）

    使用canvas绘制圆形进度条,或者是网页加载进度条 或者是显示你浏览了本网页多少-- 由于个浏览器的计算差异,打开浏览器时 初始值有所不同,但是当拉倒网页底部时,均显示100%. 兼容性:测试浏览器 ...

  4. Canvas实现环形进度条

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

  5. canvas 绘制圆形进度条

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 使用canvas实现环形进度条

    html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  7. CSS3绘制环形进度条

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. canvas环形进度条

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

  9. iOS带动画的环形进度条(进度条和数字同步)

    本篇写的是实现环形进度条,并带动画效果,要实现这些,仅能通过自己画一个 方法直接看代码 为了方便多次调用,用继承UIView的方式 .m文件 #import <UIKit/UIKit.h> ...

随机推荐

  1. IE浏览器下flex布局的bug

    原文地址:gitub上的Flexbugs list,可以看到Flex布局在IE糟糕表现的详细描述. 2. Column flex items set to align-items:center ove ...

  2. 转载， sublime text3 input函数无法执行问题解决方法

    一.安装插件SublimeREPL 按Ctrl+Shift+P,打开命令框.输入Install Package,回车,等待几秒钟,会弹窗提示“安装成功”.    按Ctrl+Shift+P,打开命令框 ...

  3. MFC中创建自定义消息

    消息映射.循环机制是Windows程序运行的基本方式.VC++ MFC 中有许多现成的消息句柄,可当我们需要完成其它的任务,需要自定义消息,就遇到了一些困难.在MFC ClassWizard中不允许添 ...

  4. 慢阻肺疾病管理APP——第一次迭代心得

    时光匆匆,不知不觉就到了第十二周.——第一次迭代都完成了,最终迭代还会远吗? 一.第一次迭代的设想和目标: 1.  我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? ...

  5. C#第一课

    C#是一种现代的面向对象的程序开发语言,它使得程序员能够在新的微软.NET平台上快速开发种类丰富的应用程序..NET平台提供了大量的工具和服务,能够最大限度地发掘和使用计算机通信能力. 相对于C或者C ...

  6. linux 免密码登陆

    1.Linux下生成密钥 ssh-keygen的命令手册,通过”man ssh-keygen“命令: 通过命令”ssh-keygen -t rsa“ 生成之后会在用户的根目录生成一个 “.ssh”的文 ...

  7. Java泛型之自限定类型

    在<Java编程思想>中关于泛型的讲解中,提到了自限定类型: class SelfBounded<T extends SelfBounded<T>> 作者说道: 这 ...

  8. 怎么单独为ionic2应用的某一组件设置两个平台一致的样式

    今天在继续项目的过程中,发现ionic2在显示样式上是根据不同的平台采用不同的样式,使在不同平台上的应用保持相应的风格,于是问题来了. ios的风格比较好看,android的风格略微不如ios的,所以 ...

  9. Python参数笔记

    Python参数 1. 普通参数 必须要传入和定义时个数相同的参数 def miao(acfun, bilibili): print(acfun, bilibili) miao(11, 22) > ...

  10. CSS grid 模板

    在gridCSS属性速记属性显式设置所有的网格性质(grid-template-rows,grid-template-columns,和grid-template-areas和所有的网格性质(隐式gr ...