1.  <!DOCTYPE html>
  2.  <html >
  3.  <head>
  4.      <meta http-equiv="content-type" content="text/html" charset="utf-8">
  5.      <meta name="author" content="xuyunfei">
  6.      <meta name="description" content="">
  7.      <meta name="keywords" content="test,html">
  8.      <title>环形进度条</title>
  9.  </head>
  10.  <body>
  11.  </br></br></br></br>
  12.  
  13.  <div style="width:300px; height:300px; margin:20px auto">
  14.       <canvas id="canvas" width="300" height="300">
  15.          <p>抱歉，您的浏览器不支持canvas</p>
  16.       </canvas>
  17.  </div>
  18.  
  19.  <script type="text/javascript">
  20.      function toCanvas(id ,progress){
  21.                  // canvas进度条
  22.                  var canvas = document.getElementById(id),
  23.                  ctx = canvas.getContext("2d"),
  24.                  percent = progress,  //最终百分比
  25.                  circleX = canvas.width / 2,  //中心x坐标
  26.                  circleY = canvas.height / 2,  //中心y坐标
  27.                  radius = 100, //圆环半径
  28.                  lineWidth = 5,  //圆形线条的宽度
  29.                  fontSize = 20; //字体大小
  30.                   //两端圆点
  31.                  // function smallcircle1(cx, cy, r) {
  32.                  //     ctx.beginPath();
  33.                  //     //ctx.moveTo(cx + r, cy);
  34.                  //     ctx.lineWidth = 1;
  35.                  //     ctx.fillStyle = '#06a8f3';
  36.                  //     ctx.arc(cx, cy, r,0,Math.PI*2);
  37.                  //     ctx.fill();
  38.                  // }
  39.                  //  function smallcircle2(cx, cy, r) {
  40.                  //      ctx.beginPath();
  41.                  //      //ctx.moveTo(cx + r, cy);
  42.                  //      ctx.lineWidth = 1;
  43.                  //      ctx.fillStyle = '#00f8bb';
  44.                  //      ctx.arc(cx, cy, r,0,Math.PI*2);
  45.                  //      ctx.fill();
  46.                  //  }
  47.  
  48.                   //画圆
  49.                   function circle(cx, cy, r) {
  50.                       ctx.beginPath();
  51.                       //ctx.moveTo(cx + r, cy);
  52.                       ctx.lineWidth = lineWidth;
  53.                       ctx.strokeStyle = '#eee';
  54.                       ctx.arc(cx, cy, r, 0, (Math.PI*2),true);
  55.                       ctx.stroke();
  56.                   }
  57.  
  58.                   //画弧线
  59.                   function sector(cx, cy, r, startAngle, endAngle, anti) {
  60.                       ctx.beginPath();
  61.                       //ctx.moveTo(cx, cy + r); // 从圆形底部开始画
  62.                       ctx.lineWidth = lineWidth;
  63.  
  64.                       // 渐变色 - 可自定义
  65.                      //  var linGrad = ctx.createLinearGradient(
  66.                      //      circleX-radius-lineWidth, circleY, circleX+radius+lineWidth, circleY
  67.                      //  );
  68.                      //  linGrad.addColorStop(0.0, '#06a8f3');
  69.                       //linGrad.addColorStop(0.5, '#9bc4eb');
  70.                      //  linGrad.addColorStop(1.0, '#00f8bb');
  71.                      //  ctx.strokeStyle = linGrad;
  72.                       ctx.strokeStyle = 'red';
  73.  
  74.                        //圆弧两端的样式
  75.                       ctx.lineCap = 'round';
  76.  
  77.                       //圆弧
  78.                      //  ctx.arc(
  79.                      //      cx, cy, r,
  80.                      //      -1.5,
  81.                      //      -1.5 + endAngle/100 * (Math.PI*5/3),
  82.                      //      false
  83.                      //  );
  84.                       ctx.arc(
  85.                           cx, cy, r,
  86.                           (Math.PI*-1/2),
  87.                           (Math.PI*-1/2) + endAngle/100 * (Math.PI*2),
  88.                           false
  89.                       );
  90.                       ctx.stroke();
  91.                   }
  92.  
  93.                    //刷新
  94.                   function loading() {
  95.                       if (process >= percent) {
  96.                          //  clearInterval(circleLoading);
  97.                          process = 0.0;
  98.                       }
  99.  
  100.                        //清除canvas内容
  101.                       ctx.clearRect(0, 0, circleX * 2, circleY * 2);
  102.  
  103.                      //中间的字
  104.                       ctx.font = fontSize + 'px April';
  105.                       ctx.textAlign = 'center';
  106.                       ctx.textBaseline = 'middle';
  107.                       ctx.fillStyle = '#999';
  108.                       ctx.fillText(parseFloat(process).toFixed(0) + '%', circleX, circleY);    
  109.  
  110.                       //圆形
  111.                       circle(circleX, circleY, radius);
  112.  
  113.                        //圆弧
  114.                       sector(circleX, circleY, radius, (Math.PI*-1/2), process);
  115.                       //两端圆点
  116.                      //  smallcircle1(150+Math.cos(2*Math.PI/360*120)*100, 150+Math.sin(2*Math.PI/360*120)*100, 5);
  117.                      //  smallcircle2(150+Math.cos(2*Math.PI/360*(120+process*3))*100, 150+Math.sin(2*Math.PI/360*(120+process*3))*100, 5);
  118.                       //控制结束时动画的速度
  119.                      //  if (process / percent > 0.90) {
  120.                      //      process += 0.30;
  121.                      //  } else if (process / percent > 0.80) {
  122.                      //      process += 0.55;
  123.                      //  } else if (process / percent > 0.70) {
  124.                      //      process += 0.75;
  125.                      //  } else {
  126.                           process += 1.0;
  127.                      //  }
  128.                   }
  129.  
  130.                   var process = 0.0;  //进度
  131.                   var circleLoading = window.setInterval(function () {
  132.                       loading();
  133.                   }, 1000);
  134.  
  135.              }
  136.  
  137.              //第二部分，调用封装好的代码：
  138.              toCanvas('canvas',100);
  139.  
  140.          </script>
  141.      </body>
  142.  </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. union、union all 、distinct的区别和用途

    1.从用途上讲 它们都具有去重的效果 2.从效率上讲 distinct通常不建议使用,效率较低;union all 和union 而言,union all效率更高;原因是:union 相当于多表查询出 ...

  2. 阿里规范学习总结-不要再foreach对元素进行add()/remove()操作，

    在foreach循环中,对元素进行 remove()/add() 操作需要使用Iterator ,如果运行在多线程环境下,需要对Iterator对象枷锁. public class ForeachTe ...

  3. nginx自定义header支持

    今天配置nginx的时候遇到一个问题,直接访问接口没有问题,但是通过nginx转发之后,总是报token失效,无法获取token值,发现请求头丢失了. 默认是不支持非nginx标准的用户自定义head ...

  4. .Net Core+Angular6 学习 第二部分(创建Angular6项目)

    . 创建angular6 前提: 需要安装nodejs以及angular的脚手架,Angular官网要求Angular6.0必须在node 8.x 和 npm 5.x 以上的版本才能正常使用. 我的版 ...

  5. web前端页面设计小笔记

    input总是在点击的时候出现蓝色边框,这是input的默认属性,就算设置了border:none:也没有用! #解决方法:outline:none; 设置input框里的placeholder值得字 ...

  6. RF新手常见问题总结

    RF新手常见问题总结--(基础篇) 1. 经常有人问这个元素找不到,一般先排除这两个地方,再自己找找A:是否等待了足够的时间让元素加载 (增加sleep xx, wait Until xxx)B:  ...

  7. 网络协议中HTTP,TCP,UDP,Socket,WebSocket的优缺点/区别

    先说一下网络的层级:由下往上分为 物理层.数据链路层.网络层.传输层.会话层.表示层和应用层 1.TCP和UDP TCP:是面向连接的一种传输控制协议.属于传输层协议.TCP连接之后,客户端和服务器可 ...

  8. PHP 解决ueditor兼容问题

    默认情况下,ueditor的内容通过PHP导入到DB中,会将内容中的html进行转义操作,此时读取显示就会有问题 step 1: $content = htmlspecialchars_decode( ...

  9. erlang link 与 monitor

    erlang设计中,通常会有这样一个需求: 某一个进程必须依赖于令一个进程的概念,在这样的情况下就必须对两个进程之间建立一个监控或者说连接关系,以监听对方的死亡情况. erlang 提供了两个这样的方 ...

  10. linux 路由表 的一些相关资料

    linux 路由表维护 查看 Linux 内核路由表 使用下面的 route 命令可以查看 Linux 内核路由表. # route Destination Gateway Genmask Flags ...