结果：

代码：

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    body {

      text-align: center;

    }

    canvas {

      background: #ddd;

    }

  </style>

</head>

<body>

  <h3>绘制路径——圆形</h3>

  <canvas id="c13" width="500" height="400"></canvas>

  <script>

    var ctx = c13.getContext('2d');

    //绘制灰色的背景圆环

    ctx.beginPath();

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

    ctx.lineWidth = 20;

    ctx.strokeStyle = '#aaa';

    ctx.stroke();

    //绘制圆形进度条

    var start = -90;  //进度条的起始角度

    var end = -90;    //进度条的终止角度

    var t = setInterval(function(){

      //此练习中可以省略“清除画布”步骤

      ctx.beginPath();

      ctx.arc(250,200,100,start*Math.PI/180,end*Math.PI/180);

      ctx.strokeStyle = '#0a0';

      ctx.stroke();

      end += 3;

      if(end>270){

        clearInterval(t);

      }

    }, 50)

  </script>

</body>

</html>

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

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

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

  2. canvas绘制环形进度条

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

  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. 在 ReportViewer 报表中使用表达式

    from:http://www.cnblogs.com/jobin/articles/1152213.html 有些表达式在报表中很常用.其中包括更改报表中的数据外观的表达式.计算总数的表达式和更改报 ...

  2. Eclipse 中安装Browse Deployment Location插件

    Browse Deployment Location 功能的插件名称为: Pivotal tc Server Integration for Eclipse  可在Eclippse的Eclipse M ...

  3. PAT 天梯赛 L1-035. 情人节 【水】

    题目链接 https://www.patest.cn/contests/gplt/L1-035 AC代码 #include <iostream> #include <cstdio&g ...

  4. jquery扩展鼠标mousewheel事件

    最近项目中要有个鼠标在图片上滚动实现图片放大和缩小的得到功能,隐约的记得好像记得有个 mousewheel 事件,可以实现需求,于是乎,开始在网上查找这一方法,但是,出乎意料的结果,各浏览器对此方法有 ...

  5. gh-ost原理

    gh-ost原理 一.三种模式架构图 1.连上从库,在主库上修改 这是gh-ost默认的工作模式,它会查看从库情况,找到集群的主库并且连接上去,对主库侵入最少,大体步骤是: 在主库上创建_xxx_gh ...

  6. JS中函数之外不能写return

    JS中return有时会遇到这种情况,具体表现为:google浏览器等浏览器可以继续执行,IE浏览器不能执行return,并且google浏览器:执行时会显示SyntaxError: Illegal ...

  7. ES6 实现阶乘

    // 实现一个5的阶乘function factorial(n, acc = 1) { console.log(`n=${n};acc=${acc}`) if(n <= 1) return ac ...

  8. No module named yum

    升级python之后,执行yum的时候可能出现错误,类似: There was a problem importing one of the Python modulesrequired to run ...

  9. java中TreeMap集合的常用方法

    实现Map集合的方法这里就不在讲了 https://www.cnblogs.com/xiaostudy/p/9510763.html public Map.Entry<K,V> ceili ...

  10. Memcached set 命令

    Memcached set 命令用于将 value(数据值) 存储在指定的 key(键) 中. 如果set的key已经存在,该命令可以更新该key所对应的原来的数据,也就是实现更新的作用. 语法: s ...