结果：

代码：

<!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. Sql case when 小例

    SELECT I.uname, C.consume, O.name,O.dis_count,O.memberType, D.name,D.dis_count,D.up,D.down, CASE WHE ...

  2. LeetCode：N叉树的前序遍历【589】

    LeetCode:N叉树的前序遍历[589] 题目描述 给定一个 N 叉树,返回其节点值的前序遍历. 例如,给定一个 3叉树 : 返回其前序遍历: [1,3,5,6,2,4]. 题目分析 使用栈结构. ...

  3. 在python中打开文件显示没有权限PermissionError: [Errno 13] Permission denied:

    不多说了,我犯了低级错误 ,文件路径搞错了

  4. redis 笔记05 Sentinel、集群

    Sentinel 1. Sentinel只是一个运行在特殊模式下的Redis服务器,它使用了和普通模式不同的命令表,所以Sentinel模式能够使用的命令和普通的Redis服务器能够使用的命令不同. ...

  5. [转]Linux下RPM软件包的安装及卸载 yum操作

    在 Linux 操作系统下,几乎所有的软件均通过RPM 进行安装.卸载及管理等操作.RPM 的全称为Redhat Package Manager ,是由Redhat 公司提出的,用于管理Linux 下 ...

  6. 哆啦A梦里的某一首诗

    <哆啦A梦>长篇<宇宙开拓>主题曲<放松心情>作词:武田铁矢 我终于发现, /昨日失去的一切, /虽然还无法完全意会, /可是对我却非常重要. /加紧脚步追赶, / ...

  7. 联合体union

    1.一般而言,共用体类型实际占用存储空间为其最长的成员所占的存储空间: //4*7==282.若是该最长的存储空间对其他成员的元类型(如果是数组,取其类型的数据长度,例int a[5]为4)不满足整除 ...

  8. Oracle数据库使用总结

    --1.使用月份作为条件筛选(to_char函数与extract函数使用) select * from test_date where to_char(dqsj,'mm') like '%07%'; ...

  9. 《React-Native系列》RN与native交互与数据传递

    RN怎么与native交互的呢? 下面我们通过一个简单的Demo来实现:RN页面调起Native页面,Native页面选择电话本数据,将数据回传给RN展示. 首先是 Native侧 1.MainAct ...

  10. Unable to handle kernel NULL pointer dereference at virtual address 00000000【转】

    本文转载自:https://blog.csdn.net/hpu11/article/details/72628052 这说明是非法指针的使用,才导致系统出错. [ 1023.510000] Unabl ...