结果：

代码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.   <meta charset="UTF-8">
  5.   <title></title>
  6.   <style>
  7.     body {
  8.       text-align: center;
  9.     }
  10.     canvas {
  11.       background: #ddd;
  12.     }
  13.   </style>
  14. </head>
  15. <body>
  16.   <h3>绘制路径——圆形</h3>
  17.   <canvas id="c13" width="500" height="400"></canvas>
  18.   <script>
  19.     var ctx = c13.getContext('2d');
  20.  
  21.     //绘制灰色的背景圆环
  22.     ctx.beginPath();
  23.     ctx.arc(250,200,100,0, 2*Math.PI);
  24.     ctx.lineWidth = 20;
  25.     ctx.strokeStyle = '#aaa';
  26.     ctx.stroke();
  27.  
  28.     //绘制圆形进度条
  29.     var start = -90;  //进度条的起始角度
  30.     var end = -90;    //进度条的终止角度
  31.     var t = setInterval(function(){
  32.       //此练习中可以省略“清除画布”步骤
  33.       ctx.beginPath();
  34.       ctx.arc(250,200,100,start*Math.PI/180,end*Math.PI/180);
  35.       ctx.strokeStyle = '#0a0';
  36.       ctx.stroke();
  37.  
  38.       end += 3;
  39.       if(end>270){
  40.         clearInterval(t);
  41.       }
  42.     }, 50)
  43.   </script>
  44. </body>
  45. </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. s5_day3作业

    # 一.元素分类 # 有如下值集合[11, 22, 33, 44, 55, 66, 77, 88, 99, 90...],将所有大于 # # 的值保存至字典的第一个key中,将小于 # # 的值保存至 ...

  2. 常用的Issue解决方案(EF框架)

    1.提交出错:ObjectStateManager 中已存在具有同一键的对象.    ObjectStateManager 无法跟踪具有相同键的多个对象. 遇到此问题,首先要确定的是主键是否赋值,以及 ...

  3. boot空间不足，删除Ubuntu旧内核

    0 Problem 今天打开电脑的时候ubuntu提示boot空间不足.查了资料,原来Ubuntu的自动升级并没有删除系统的旧内核,于是boot下旧的内核文件越积越多,最后就满了. 1 Solutio ...

  4. 认识shiro

    shiro是安全(权限)框架,不仅可以在javase中也可以在javaee中 shiro可以完成认证.授权.加密.会话管理,与web进行集成.缓存等. Authentication:身份认证/登录,验 ...

  5. 【Flask】WTForms文件上传下载

    # 文件上传笔记:1. 在模版中,form表单中,需要指定`encotype='multipart/form-data'`才能上传文件.2. 在后台如果想要获取上传的文件,那么应该使用`request ...

  6. Java：正则表达式

    Java:正则表达式 package com.fsti.icop.util.regexp; import java.util.regex.Matcher; import java.util.regex ...

  7. linux 查看内存信息，及其他硬件信息 dmidecode命令

    由于想换内存,想看看内存型号.频率,简单搜了下命令 可以用dmidecode 命令查看. dmidecode -t memory 这个命令可以查看内存的几乎所有信息,包括频率 大小等等 另外这个命令强 ...

  8. 20165114 《网络对抗技术》 Exp0 Kali安装与配置 Week1

    目录: 一.kail的下载与安装 二.kali的网络设置 三.安装vmware-tools. 四.更新软件源. 五.共享文件夹 六.安装中文输入法 一.kail的下载与安装 VMware workst ...

  9. Ubuntu gcc错误：对'log'等函数未定义的引用

    Ubuntu gcc错误:对'log'等函数未定义的引用 a.c #include <stdio.h>#include <math.h>int main(){    float ...

  10. [BZOJ1721][Usaco2006 Mar]Ski Lift 缆车支柱

    Description Farmer Ron in Colorado is building a ski resort for his cows (though budget constraints ...