结果：

代码：

<!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. CentOS中nginx负载均衡和反向代理的搭建

    1: 修改centos命令行启动(减少内存占用): vim /etc/inittab :initdefault: --> 修改5为3 若要界面启动使用 startx 2:安装jdk )解压:jd ...

  2. C# winform 屏蔽鼠标右键 spreadsheet Gear 屏蔽鼠标右键菜单

    今天用到spreadsheetGear 插件,然后右键有插件自己的菜单.都是英文的,而且还能打开新的窗体.嵌到程序里面,不太合适,所以着手屏蔽. 刚开始用的Mouse_up,虽然能捕获事件,但是没有K ...

  3. PHP-FPM 设置多pool、配置文件重写

    重写配置文件 1.清空php配置文件 命令:> /usr/local/php/etc/php-fpm.conf 2.重新写入php-fpm配置 命令:vim /usr/local/php/etc ...

  4. Linux常用命令--文件（夹）查找之find命令

    Linux系统用得越久,就会发现这真的是一个很优秀的系统,各种方便各种实用各种高效率. 晚饭前写一下find命令的笔记. 其实这篇笔记,也是看到一篇外文博客,写得不错,自己拿来练一练,然后才顺便写篇笔 ...

  5. 安装配置zabbix代理之zabbix_proxy

    配置Proxy代理 如图所示: zabbix_server端在阿里云上,其代理程序部署在各地机房,代理程序收集所在机房的所有机器监控指标,然后传给server端 环境说明: CentOS releas ...

  6. centos 安装 mysql-5.7.23-linux-glibc2.12-x86_64.tar.gz 详细步骤

    1.卸载Linux系统上自带的mysql插件(old版本) 查找mysql相关安装: rpm -qa|grep -i mysql 可能会出现以下的一个或多个,没有更好,说明你的系统很干净,但是以防万一 ...

  7. 常见linux系统中RPM包的通用命名规则

    本文重点说一下在常见的linux系统中,RPM包通用的命名规则. RPM包的一般格式为:name-version-arch.rpmname-version-arch.src.rpm 例:httpd-2 ...

  8. CTCS-2017滚粗记

    Day 0: 下午不到四点就来到了宾馆,环境好评,网速能接受,但是你给我搞了个大床房是什么玩意儿啊... 晚上看MasterJH5574大神一直在写题热身(无限崇拜),自己板子没看几眼就丢到一遍去了, ...

  9. LeftoverDataException，依赖包，apache license 2.0

    1. poi3.9 LeftoverDataException org.apache.poi.hssf.record.RecordInputStream$LeftoverDataException: ...

  10. Spring scope解惑

    在2.0之前只有两种singleton和prototype(网上说的,没去验证),后面增加了session.request.global session三种专门用于web应用程序上下文的Bean Si ...