美文网首页
使用canvas绘制圆形进度条

使用canvas绘制圆形进度条

作者: pengjielele | 来源:发表于2018-03-28 19:30 被阅读126次

实现步骤:

  • 绘制一个圆;
  • 绘制圆环;
  • 绘制进度环;
  • 绘制文字;

一、创建画布

<canvas id='myCanvas'></canvas>

二、绘制一个圆

var canvas = document.getElementById('myCanvas1');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI, false);
ctx.strokeStyle = 'red'; 
ctx.stroke();
显示效果

三、绘制圆环:

var canvas = document.getElementById('myCanvas1');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI, false);

// new added
ctx.lineWidth = 15;

ctx.strokeStyle = 'red'; 
ctx.stroke();
显示效果

四、绘制进度环

var canvas = document.getElementById('myCanvas1');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI, false);
ctx.lineWidth = 15;
ctx.strokeStyle = 'red'; 
ctx.stroke();

//new added
var startAngle = 3 / 2 * Math.PI; //开始位置弧度
var percentage = 10;  //完成进度值 
var diffAngle = percentage / 100 * Math.PI * 2; //完成进度弧度值
ctx.beginPath();
ctx.arc(100, 100, 50, startAngle, diffAngle + startAngle, false);
ctx.strokeStyle = 'green';
ctx.stroke();
显示效果

五、绘制文字

var canvas = document.getElementById('myCanvas1');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI, false);
ctx.lineWidth = 15;
ctx.strokeStyle = 'red'; 
ctx.stroke();

var startAngle = 3 / 2 * Math.PI; //开始位置弧度
var percentage = 10;  //完成进度值 
var diffAngle = percentage / 100 * Math.PI * 2; //完成进度弧度值
ctx.beginPath();
ctx.arc(100, 100, 50, startAngle, diffAngle + startAngle, false);
ctx.strokeStyle = 'green';
ctx.stroke();

//new added
ctx.fillStyle = '#000';
ctx.textAlign = 'center';
ctx.font = '16px serif';
ctx.fillText(percentage + '%', 100+2, 100+5);
显示效果

六、完整代码

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(factory);// AMD
  } else if (typeof exports === 'object' && typeof module !== 'undefined') {
    module.exports = factory(); // CommonJS
  } else {
    window.Progressbar = factory(); // Browser globals
  }
}(this, function () {
  function Progressbar(options){
    this.id = options.id;
    this.value = options.value || 0;
    this.width = options.width || 200;
    this.height = options.height || 200;
    this.bgColor = options.bgColor || 'green';
    this.barColor = options.barColor || 'red';
    this.fontColor = options.fontColor || '#000';
    if(options.init){
      this.init();
    }
  }
  Progressbar.prototype.init = function(){
    var canvas = document.getElementById(this.id);

    if(!canvas.getContext) {
      throw new Error('your browser does not support canvas')
    }

    if(!this.id){
      throw new Error('your need pass id ')
    }

    var width = parseInt(this.width);
    var height = parseInt(this.height);
    canvas.setAttribute('width',width);
    canvas.setAttribute('height',height);

    var ctx = canvas.getContext("2d");

    var startAngle = 3 / 2 * Math.PI;
    var percentage = 0;
    var diffAngle = 0;
    var cx = width / 2;
    var cy = height / 2;
    var timer = setInterval(draw, 50);
    var value = this.value;
    var bgColor = this.bgColor;
    var barColor = this.barColor;
    var fontColor = this.fontColor;

    function draw(){
      diffAngle = (percentage / 100) * Math.PI * 2;

      //清除矩形区域
      ctx.clearRect(0, 0, width, height);

      ctx.beginPath();

      //设置线段宽度
      ctx.lineWidth = 15;

      //绘制圆
      ctx.arc(cx, cy, 50, 0, 2 * Math.PI, false);

      //设置填充色
      ctx.fillStyle = '#FFF';
      ctx.fill();

      //绘制图形轮廓
      ctx.strokeStyle = bgColor; 
      ctx.stroke();

      //绘制百分比进度
      ctx.beginPath();
      ctx.arc(cx, cy, 50, startAngle, diffAngle + startAngle, false);
      ctx.strokeStyle = barColor;
      ctx.stroke();

      //绘制百分比文字
      ctx.fillStyle = fontColor;
      ctx.textAlign = 'center';
      ctx.font = '16px serif';
      ctx.fillText(percentage + '%', cx, cy + 6);

      if (percentage >= value) {
        clearTimeout(timer);
      }

      percentage++;
    }
  }
  return Progressbar;
}));

var progressbar1 = new Progressbar({ id: 'myCanvas1',value: 20 ,init: true })
var progressbar2 = new Progressbar({ id: 'myCanvas2',value: 30 ,init: true })

七、查看效果

进度条

八、参考资料

使用canvas来绘制图形

九、原文

原文

相关文章

  • 使用canvas绘制圆形进度条

    实现步骤: 绘制一个圆; 绘制圆环; 绘制进度环; 绘制文字; 一、创建画布 二、绘制一个圆 三、绘制圆环: 四、...

  • 小程序原型进度条

    微信小程序本身提供了html5中原生的直线进度条,但是没有提供圆形进度条,这里我使用canvas简单实现了一个圆形...

  • canvas基础知识总结

    一、Canvas-绘制文字 1、属性 二、canvas-设置阴影 三、canvas-创建路径-绘制矩形和圆形 1、...

  • Canvas绘制圆形

    使用canvas绘制圆形步骤: 1、在页面中创建canvas的节点(相当于创建一个画板),设置CSS样式。(注意:...

  • 圆形进度条

    title: 圆形进度条date: 2017-12-25 20:21:17tags: canvas模拟进度条 利用...

  • UIBezierPath与CAShapeLayer混合使用

    一、使用CAShapeLayer绘制一个圆 二、给圆加圆形进度条动画 这时我们会发现进度条的起始点不是在顶端,把c...

  • canvas_circlemap# 在画布上绘制圆形贴图,R语言

    R语言aRtsy包,canvas_circlemap# 在画布上绘制圆形贴图

  • canvas学习记录

    canvas指定的 id、width、height三个属性 。 绘制圆形 需要执行如下步骤:开始创建路径使用图形上...

  • 初探HTML5——canvas元素(四)

    目前为止已经演示了使用canvas绘制直线、矩形、虚线,小伙伴们说想要绘制一个圆形,那么该如何操作呢?别急,本小节...

  • Android圆形进度条自定义

    自定义圆形进度条 实现 圆形进度条api 使用 将MyCircleProgressView和attrs.xml下的...

网友评论

      本文标题:使用canvas绘制圆形进度条

      本文链接:https://www.haomeiwen.com/subject/clpucftx.html