结果：

代码：

<!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. js小技巧（收集的）

    一.事件源对象 event.srcElement.tagName //IE浏览器 event.srcElement.type event.target.tagName //dom浏览器 event.t ...

  2. java调用ffmpeg命令行推流遇到的问题

    1.Java调用命令行,如果没有额外环境变量,不指定工作路径,Runtime有两个方法 public Process exec(String command) public Process exec( ...

  3. Hadoop2.7.x中所有的DataNode都启动不了解决办法

    参考:Hadoop集群所有的DataNode都启动不了解决办法说明现象:我自己出现这个问题的原因是:自己在namenode格式化之后创建了一些文件,然后重新执行了namenode格式化导致的. 现象就 ...

  4. JS中的正则应用

    如果还未掌握正则基础知识可先看另一篇:正则笔记-忘记就来看 创建方法: 直接量语法:/pattern/attributes 创建 RegExp 对象的语法:new RegExp(pattern, at ...

  5. linux---（6/27）tr命令和sed命令详解

    Tr命令: tr是简单的单个“字符”处理工具,而sed是功能非常强大的“字符串”处理工具. 用于查询,字符串2用于处理各种转换.tr刚执行时,字符串1中的字符被映射到字符串2中的字符,然后转换操作开始 ...

  6. ajax与一般处理程序 HTTP协议交互

    1,一般处理程序中 context.Response.ContentType = "text/plain", 则  ajax参数中 也是 text 类型. 2,一般处理程序中 转化 ...

  7. NET中IL指令详解

    名称 说明 Add 将两个值相加并将结果推送到计算堆栈上. Add.Ovf 将两个整数相加,执行溢出检查,并且将结果推送到计算堆栈上. Add.Ovf.Un 将两个无符号整数值相加,执行溢出检查,并且 ...

  8. 函数：生成n个互不相同的随机数，最大值为upper

    参考:http://blog.csdn.net/zhangkaihang/article/details/6836506 函数getRandArray()功能说明: 入参:int upper-生成的随 ...

  9. git多站点帐号配置

    事件场景 小明同学是一个非常努力的coder,业余时间都花在了github.com上面,因为公司的台式机性能比较好,小明同学想在公司电脑上面也进行开发.但是github上面的帐号邮箱跟公司分配的帐号邮 ...

  10. BOOST编译方法

    Windowsbjam --toolset=msvc-9.0 --prefix=C:\vc9_boost\vc9 --build-type=complete link=static threading ...