结果：

代码：

<!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. Spring Data Jpa示例（IntelliJ maven项目）

    1. 在IntelliJ中新建maven项目 给出一个建好的示例,(本示例中省略了业务逻辑组件UserService) 2. 在pom.xml中配置依赖 包括: spring-context spri ...

  2. java没有指针

    先说结论:java没有指针,它使用对象引用来替代指针 备注:c/c++的引用和java的引用完全不是一个东西 c/c++的引用是同一块内存的不同名字 java的引用指向一个对象,引用本身也占用了内存 ...

  3. C\C++与Java中的static关键字

    C\C++里面的static: 面向过程的static: 在c和c++面向过程的设计里,在全局变量前加上static关键字则可将该变量定义为一个静态全局变量,比如: static int a; 那么c ...

  4. Book Review of "The Practice of Programming" (Ⅰ)

    The Practice of Programming In the preface, the author illustrates four basic principles of programm ...

  5. React Native之Fetch简单封装、获取网络状态

    1.Fetch的使用 fetch的使用非常简单,只需传入请求的url fetch('https://facebook.github.io/react-native/movies.json'); 当然是 ...

  6. C语言细节注意

    前段时间用C语言写了个小的程序,也算是复习了下好久没有用的C语言.也是有好多的坑了,哈哈. 1.C语言的结构体 结构体的命名最好能够做到规范.因为不同的 编译环境下,不是很规范的命名有时候会导致莫名其 ...

  7. 最简单的CI框架入门示例--数据库取数据

    前提: 安装好MySQL,Apache,PHP. 1.下载CI框架 下载地址  http://www.codeigniter.com/ 2.配置 database.php配置:    为数据库服务器设 ...

  8. Nginx Rewrite 规则入门 伪静态规则

    文件及目录匹配: -f 和 !-f 用来判断是否存在文件 -d 和 !-d 用来判断是否存在目录 -e 和 !-e 用来判断是否存在文件或目录 -x 和 !-x 用来判断文件是否可执行 正则表达式匹配 ...

  9. CentOS 5 上使用yum同时安装32位和64位包的解决方法

    在centos上使用yum在线安装软件包的时候,有时候会同时安装32位和64位的包.并且在update的时候也会更新双份. 其实让yum只安装64位的包,只要在 /etc/yum.conf 中加个 e ...

  10. jmeter-JSON Path Assertion（对响应的json数据进行断言）

    1,通过plugin manager 安装json  pllugins