结果：

代码：

<!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. smarty基础原理

    smarty基础原理 一.html模板页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  2. PAT 天梯赛 L1-012. 计算指数 【水】

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

  3. 20145219 《Java程序设计》第03周学习总结

    20145219 <Java程序设计>第03周学习总结 教材学习内容总结 基本类型和类类型 基本类型:第三章中讲述的那几种,short.long.int.byte.double.char. ...

  4. Javascript中call()和apply()的用法 ----1

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  5. VSCode代码格式化自动换行问题

    打开VS设置,添加如下代码 "vetur.format.defaultFormatter.html": "js-beautify-html", "ve ...

  6. Mybatis之基础应用小结以及IntelliJ IDEA目录结构的一些小问题

    IntelliJ IDEA 目录结构的一些小问题 [Mybatis 之基础应用小结] 1.不管怎么样,先建立一个简单的MySQL数据表,如下所示 2.接下来要做的事情就是通过Mybatis对数据表进行 ...

  7. APP测试的要点

    APP测试要点 功能性 UI界面 安装与卸载 升级 登录测试 离线测试 安全性测试 兼容性(操作系统,屏幕尺寸,分辨率,厂家) 消息推送 前后台切换 网络环境(wifi/2G/3G/4G/无网) 异常 ...

  8. Nginx进阶-不停服更新

    前言 7*24小时不间断的提供对外服务和产品快速迭代是互联网行业的特征,基于需求所有的发布都不能停止当前对外的服务.本文围绕此话题衍生出,不停服上下线工具实现. 看本文前请先看 Nginx初识 Ten ...

  9. 安装MySQL 5.6

    记录安装mysql 5.6的全过程 下载安装包(尝试过使用mysql的yum源去安装--如果你的网络够好的话...) 注:我的系统是Centos 7.2的 如下,根据自己的需求去下载 CentOS L ...

  10. 《Maven实战》第6章 仓库

    6.1什么是Maven仓库? Maven仓库:存储所有Maven项目共享的构件的统一位置. Maven仓库的作用:Maven项目仅需声明依赖坐标,即可在需要的时候自动根据坐标找到仓库中的构件. 6.2 ...