基于Vue框架封装的画环形进度条组件

 

这个是基于Vue框架封装的可多次调用的画环形进度条的组件下面是组件代码

<template>
  <div class="progess-container">
    <canvas :id="params.id" width="200" height="200"></canvas>
  </div>
</template>
<script>
export default {
  props: {
    params: {
      type: Object,
      required: true
    }
  },
  data() {
    return {};
  },
  methods: {
    // canvas属性初始化
    init: function() {
      this.ele = document.getElementById(this.params.id);
      this.ctx = this.ele.getContext("2d");
      this.percent = this.params.percent;
      this.forecolor = this.params.forecolor;
      this.bgcolor = this.params.bgcolor;
      this.center_x = this.ele.width / 2;
      this.center_y = this.ele.height / 2;
      this.speed = 0;
      this.rad = (Math.PI * 2) / 100;
    },
    //画背景圆圈
    drawBackgroundCircle: function() {
      this.ctx.save();
      this.ctx.beginPath();
      this.ctx.lineWidth = 18;
      var radius = this.center_x - this.ctx.lineWidth;
      this.ctx.strokeStyle = this.bgcolor;
      this.ctx.arc(this.center_x, this.center_y, radius, 0, Math.PI * 2, true);
      this.ctx.stroke();
      this.ctx.closePath();
      this.ctx.restore();
    },
    //画前景圆圈
    drawfrontCircle: function(n) {
      this.ctx.save();
      this.ctx.beginPath();
      this.ctx.lineWidth = 18;
      var radius = this.center_x - this.ctx.lineWidth;
      this.ctx.lineCap = "round";
      this.ctx.strokeStyle = this.forecolor;
      this.ctx.arc(
        this.center_x,
        this.center_y,
        radius,
        Math.PI / 2,
        Math.PI / 2 - n * this.rad,
        true
      ); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
      this.ctx.stroke();
      this.ctx.closePath();
      this.ctx.restore();
    },
    // 绘制百分比方法
    drawText: function(n) {
      this.ctx.save();
      this.ctx.fillStyle = "#000000";
      var font_size = 35;
      this.ctx.font = font_size + "px Helvetica";
      var text_width = this.ctx.measureText(n.toFixed(1) + "%").width;
      this.ctx.fillText(
        n.toFixed(1) + "%",
        this.center_x - text_width / 2,
        this.center_y + font_size / 4
      );
      this.ctx.restore();
    },
    //动态渲染方法
    animation: function() {
      this.ctx.clearRect(0, 0, this.ele.width, this.ele.height);
      this.drawBackgroundCircle();
      this.drawfrontCircle(this.speed);
      this.drawText(this.speed);
      if (this.speed >= this.percent) {
        this.speed = this.percent;
        return false;
      }
      this.speed++;
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style>
.progess-container {
  position: relative;
  text-align: center;
  width: 3.75rem;
  margin-top: 0.45rem;
}
canvas {
  width: 2rem;
  height: 2rem;
}
</style>