<style>
  canvas {
    border: 1px solid red;
    margin: 100px;
  }
</style>

<canvas id="ring-process-bar" width="100" height="100">
  您的浏览器不支持html5 canvas标签。
</canvas>

<script>
  var ring = document.getElementById('ring-process-bar');
  var rtx = ring.getContext('2d');
  rtx.beginPath(); //起始一条路径
  rtx.lineWidth = 20; //设置当前线条的宽度
  rtx.strokeStyle = '#ccc'; //设置笔触的颜色
  rtx.lineCap = 'round'; //结束线帽:butt默认平直/round圆形/square正方形
  rtx.arc(50, 50, 40, 0, 2 * Math.PI, true); //arc(x,y,r,start,stop,false) 创建弧/曲线/圆;圆中心点的x,y坐标;r半径;start起始角,三点钟位置为0度;false顺时针,默认
  rtx.stroke();
</script>

<canvas id="ring-canvas" width="500" height="200">
  您的浏览器不支持html5 canvas标签。
</canvas>

<script>
  function Circle() {
    this.centerX = 100; 
    this.centerY = 100;
    this.radius = 90; 
    this.lineWidth = 20;
    this.strokeStyle = '#ccc'; 
    this.fillStyle = 'blue'; 
    this.lineCap = 'round'; 
  }

  Circle.prototype.draw = function(ctx) {
    ctx.beginPath();
    ctx.arc(this.centerX, this.centerY, this.radius, 0, Math.PI * 2, false);
    ctx.lineWidth = this.lineWidth;
    ctx.strokeStyle = this.strokeStyle;
    ctx.stroke();
  };

  function Ring(startAngle, percent) {
    Circle.call(this);
    this.startAngle = startAngle || Math.PI / 2 * 3; //弧起始角度
    this.percent = percent; //弧占的比例
  }

  Ring.prototype = Object.create(Circle.prototype);

    Ring.prototype.drawRing = function(ctx) {
      var  count = 0,
        start = this.startAngle,
        stop = start + Math.PI * 2 * this.percent / 100;

      this.draw(ctx);

      ctx.beginPath();
      ctx.arc(this.centerX, this.centerY, this.radius, start, stop, false); //这里的圆心坐标要和cirle的保持一致
      ctx.strokeStyle = this.fillStyle;
      ctx.lineCap = this.lineCap;
      ctx.stroke();
      ctx.closePath();
  }

  var ring = document.getElementById('ring-canvas');
  var rtx = ring.getContext('2d');
  var r = new Ring(0, 80);
  r.drawRing(rtx)
</script>

HTML5 Canvas菜鸟教程

HTML5 Canvas绘制环形进度条

canvas环形进度条的更多相关文章

  1. 用初中数学知识撸一个canvas环形进度条

    周末好,今天给大家带来一款接地气的环形进度条组件vue-awesome-progress.近日被设计小姐姐要求实现这么一个环形进度条效果,大体由四部分组成,分别是底色圆环,进度弧,环内文字,进度圆点. ...

  2. 环形进度条的实现方法总结和动态时钟绘制(CSS3、SVG、Canvas)

    缘由: 在某一个游戏公司的笔试中,最后一道大题是,“用CSS3实现根据动态显示时间和环形进度[效果如下图所示],且每个圆环的颜色不一样,不需要考虑IE6~8的兼容性”.当时第一想法是用SVG,因为SV ...

  3. canvas绘制环形进度条

    <!DOCTYPE html> <html > <head> <meta http-equiv="content-type" conten ...

  4. html5 canvas绘制环形进度条,环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

  5. canvas实现半圆环形进度条

    html部分 <canvas id="canvas" width="150" height="150"> <p>抱歉 ...

  6. Canvas实现环形进度条

    Canvas实现环形进度条 直接上代码: <canvas width="200" height="200" >60%</canvas> ...

  7. 仿MIUI音量变化环形进度条实现

    Android中使用环形进度条的业务场景事实上蛮多的,比方下载文件的时候使用环形进度条.会给用户眼前一亮的感觉:再比方我大爱的MIUI系统,它的音量进度条就是使用环形进度条,尽显小米"为发烧 ...

  8. 【css】如何实现环形进度条

    最近团队的童鞋接到了一个有关环形进度条的需求,想要还原一个native的沿环轨迹渐变进度条的效果,看到这个效果的时候,笔者陷入了沉思.. 环形进度条的效果,最先想到的就是使用CSS利用两个半圆的hac ...

  9. 自定义环形进度条RoundProgressBar

    一.效果图: Canvas画圆环说明: 圆环宽度不必在意,只是画笔宽度设置后达到的效果. 二.实现步骤 1.自定义View-RoundProgressBar 2.设置属性resources(decle ...

随机推荐

  1. HDU1560 DNA sequence(IDA*)题解

    DNA sequence Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) To ...

  2. 项目梳理4——WebApi项目,使用注释填充Description字段

    web.config中添加连接字符串: 为webapi添加Description,使用注释来填充此字段 对于所有引用的xxxx.base项目设置生成的xml文档,注意release.debug下都需设 ...

  3. SQL 事务(Transaction)

    1.概念 指访问并可能更新数据库中各种数据项的一个程序执行单元(unit)由多个sql语句组成,必须作为一个整体执行这些sql语句作为一个整体一起向系统提交,要么都执行.要么都不执行 语法步骤:开始事 ...

  4. ZOJ 3329 One Person Game (经典概率dp+有环方程求解)

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3329 题意:现在有三个骰子,分别有k1,k2和k3面,面上的点就是1~ki ...

  5. hdu 6020 MG loves apple 恶心模拟

    题目链接:点击传送 MG loves apple Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 262144/262144 K (Ja ...

  6. python flask demo

    from flask import Flask, jsonify from flask import abort from flask import make_response from flask ...

  7. ubuntu-server14.04 网络配置

    一.启动网卡 ubuntu server 安装后,ifconfig 发现只有一个lo 和一个p1p1 网卡, 先查看服务器网卡:ifconfig -a ,发现有lo ,p1p1,p2p1,p3p1,p ...

  8. 如何 Graphics 对象设置背景色

    用 Clear 方法可以轻松地给 Graphics 对象设置背景色. using (Bitmap bmp = new Bitmap(width, height)){    using (Graphic ...

  9. 《图解Http》8: 用户身份认证Cookie管理session; 9:HTTP的追加协议(websoket, webDAV)

    基本认证,(安全等级低,多数网站不使用) Digest认证:(也不怎么用) SSL客户端认证:(凭借客户端证书认证,如网银登陆) 表单认证:用户名/密码.(常用) SSL客户端认证采用two-fact ...

  10. android--------面试题收集

    Android是一种基于Linux的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导及开发.这里会不断收集和更新Android基础相关的面试题 ...