vue 实现 canvas 绘制 半圆环进度条的具体方法

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天。

实现效果

实现方法

主要用到的就是 canvas 的原生绘图方法，只是把代码风格改成了 vue 能实现的方式。主要也是通过获取 DOM 进行具体的绘制，用到的是 mounted 声明周期，实现代码如下：

html:

<canvas style="width: 100%; height: 100%" ref="canvas" id="canvas"></canvas>

JS:

props: {
    value: { type: Number, default: 50 }, // 进度值
    width: { type: String, default: "150" },
    height: { type: String, default: "70" },
    color: { type: String, default: "#ffbf00" } // 进度条的颜色
},
data() {
    return {
      canvas:'',
      percent:'',
      ctx:'',
      circleX:'',
      circleY:'',
      radius:'',
      cradius:'',
      lineWidth:'',
      fontSize:'',
      // color:'',
      process:'',
      circleLoading:null,
      // value: 80,
      // id: 'canvas'
    };
  },
 mounted() {
    this.toCanvas(this.color);
  },
 methods: {
    //两端圆点
    smallcircle1(cx, cy, r) {
      this.ctx.beginPath();
      // this.ctx.moveTo(cx + r, cy);
      this.ctx.lineWidth = 1;
      this.ctx.fillStyle = "#06a8f3";
      this.ctx.arc(cx, cy, r, Math.PI, Math.PI * 2);
      this.ctx.fill();
    },
    smallcircle2(cx, cy, r) {
      this.ctx.beginPath();
      //ctx.moveTo(cx + r, cy);
      this.ctx.lineWidth = 1;
      this.ctx.fillStyle = "#fff";
      this.ctx.arc(cx, cy, r, Math.PI, Math.PI * 2);
      this.ctx.fill();
    },
    //画圆
    circle(cx, cy, r) {
      this.ctx.beginPath();
      //ctx.moveTo(cx + r, cy);
      this.ctx.lineWidth = this.lineWidth;
      this.ctx.strokeStyle = "#eee";
      // this.ctx.arc(cx, cy, r, (Math.PI * 2) / 3, (Math.PI * 1) / 3);
      this.ctx.arc(cx, cy, r, Math.PI, Math.PI * 2);
      this.ctx.stroke();
    },
    //画弧线
    sector(cx, cy, r, startAngle, endAngle, anti) {
      this.ctx.beginPath();
      //ctx.moveTo(cx, cy + r); // 从圆形底部开始画
      this.ctx.lineWidth = this.lineWidth;
      // 进度条颜色
      this.ctx.strokeStyle = this.color;
      //圆弧两端的样式
      this.ctx.lineCap = "round";
      //圆弧
      // this.ctx.arc(cx,cy,r,(Math.PI * 2) / 3,(Math.PI * 2) / 3 + (endAngle / 100) * ((Math.PI * 5) / 3),false);
      this.ctx.arc(cx, cy, r, Math.PI, Math.PI * (1 + endAngle / 100),false);
      this.ctx.stroke();
    },
    //刷新
    loading(progress) {
      if (this.process >= this.percent) {
        clearInterval(this.circleLoading);
      }
      //清除canvas内容
      this.ctx.clearRect(0, 0, this.circleX * 2, this.circleY * 2);
      //中间的字
      this.ctx.font = this.fontSize + "px April";
      this.ctx.textAlign = "center";
      this.ctx.textBaseline = "bottom";
      this.ctx.fillStyle = this.color;
      this.ctx.fillText(parseFloat(this.process).toFixed(0) + "%", this.circleX, this.circleY);
      //圆形
      this.circle(this.circleX, this.circleY, this.radius);
      //圆弧
      this.sector(this.circleX, this.circleY, this.radius, (Math.PI * 2) / 3, this.process);
      //两端圆点
      this.smallcircle1(
        this.cradius + Math.cos(((2 * Math.PI) / 360) * 120) * this.radius,
        this.cradius + Math.sin(((2 * Math.PI) / 360) * 120) * this.radius,
        0
      );
      //控制结束时动画的速度
      if (this.process / this.percent > 0.9) {
        this.process += 0.3;
      } else if (this.process / this.percent > 0.8) {
        this.process += 0.55;
      } else if (this.process / this.percent > 0.7) {
        this.process += 0.75;
      } else {
        this.process += 1.0;
      }
    },
    /** 生成环形进度条 **/
    toCanvas(color) {
      console.log(1111, this.$refs.canvas)

      // this.canvas = document.getElementById(id);
      this.canvas = this.$refs.canvas;
      this.percent = this.value //最终百分比
      this.ctx = canvas.getContext("2d");
      this.circleX = canvas.width / 2; //中心x坐标
      this.circleY = canvas.height - 20; //中心y坐标
      this.radius = 45; //圆环半径
      this.cradius = 85; // canvas半径
      this.lineWidth = 6; //圆形线条的宽度
      this.fontSize = 20; //字体大小
      this.process = 50.0; //进度
      this.color = color;
     
      this.circleLoading = window.setInterval(() => {
        this.loading(this.value);
      }, 20);
    }
  }

有一个遗留的问题，就是只有 id 存在的时候绘制才会成功，但是当把这个进度条当做组件去用的时候，却发现只有第一个绘制成功。有知道的大神可以帮我解决一下。