结果：

代码：

<!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. 什么是 jQuery 和jQuery的基本选择器，层级选择器，基本筛选器

    jQuery是什么? ［1］   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. ［2］   jQuery是继prototype ...

  2. PAT 天梯赛 L1-019. 谁先倒 【水】

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

  3. 广州亿能自动化测试沙龙 - 自动化测试管理平台设计 [ 沙龙PPT免费下载 ]

    广州亿能自动化测试沙龙 - 自动化测试管理平台设计 [ 沙龙PPT免费下载 ] http://automationqa.com/forum.php?mod=viewthread&tid=244 ...

  4. svn / git SourceTree

    开发使用SourceTree 忽略文件这块老弄错,这次专门博客一下,使用CocoaPods 开发项目, 忽略步骤如下:  忽略文件内容如下 *.xcworkspace xcuserdata *.loc ...

  5. hadoop12---java并发编程的一些总结

    java并发编程的一些总结 %.1.不应用线程池的缺点 有些开发者图省事,遇到需要多线程处理的地方,直接new Thread(...).start(),对于一般场景是没问题的,但如果是在并发请求很高 ...

  6. System.Linq.Dynamic 动态查询

    安装 VS->工具栏->NuGet程序管理器,System.Linq.Dynamic 注意: 使用动态查询必须先调用AsQueryable()方法,因为动态扩展仅适用于实现IQueryab ...

  7. uvm的sequence

    1,每个sequence都有一个body任务.当一个sequence启动后,会自动执行sequence的body任务,所以在sequence的class中,一定要有一个名为body的task. 此外, ...

  8. [CF19E]Fairy

    给定一张n个点m条边的无向图,求删除哪一条边后,能够确保构成一个二分图,输出所有可能 解法:我们知道二分图的性质是没有奇环,这道题我们也应该从这个方面入手来考虑. 如果没有奇环的话我们当然想怎么删就怎 ...

  9. 迁移cnblog博客

    title: 迁移cnblog博客 date: 2018-03-18 categories: cnblogs tags: life 写博客最怕就是这种迁来迁去的,太麻烦了 还好老早就使用markdow ...

  10. ErrorHandling in asp.net web api

    https://docs.microsoft.com/en-us/aspnet/web-api/overview/error-handling/exception-handling https://d ...