关于vue.js:vue-使用canvas画圆弧进度条

话不多说先上效果图，合乎需要再往下看：

这是参考有赞商城做的一个小性能。
间接贴办法，到时候间接调用办法传值就好。

html:

<canvas
   id="circle"
   class="circle-item"
   width="240px"
   height="240px"
>
</canvas>

script:

mounted() {this.toCanvas("circle", 70);
 // 第一个是 id，第二个百分比（圆弧达到地位）},
  

toCanvas(id, progress) {
      //canvas 进度条
      var canvas = document.getElementById(id);
      var ctx = canvas.getContext("2d");
      var percent = progress; // 最终百分比
      var circleX = canvas.width / 2; // 核心 x 坐标
      var circleY = canvas.height / 2; // 核心 y 坐标
      var radius = 90; // 圆环半径
      var lineWidth = 14; // 圆形线条的宽度
      // 两头的字
      var fontSize = 25;
      ctx.font = fontSize + "px April";
      ctx.textAlign = "center";
      ctx.fillStyle = "#000";
      ctx.fillText(parseFloat(percent).toFixed(0), circleX, circleY);
      fontSize = 12;
      ctx.font = fontSize + "px April";
      ctx.fillStyle = "#999";
      ctx.fillText("我的成长值", circleX, circleY - 40);
      ctx.fillStyle = "#999";
      ctx.fillText("还差 20 积分降级会员", circleX, circleY + 40);
      // 画圆
      function circle(cx, cy, r) {ctx.beginPath();
        //ctx.moveTo(cx + r, cy);
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = "#fff";
        ctx.arc(cx, cy, r, (Math.PI * 2) / 3, (Math.PI * 1) / 3);
        ctx.stroke();}
      // 画弧线
      function sector(cx, cy, r, startAngle, endAngle) {ctx.beginPath();
        //ctx.moveTo(cx, cy + r); // 从圆形底部开始画
        ctx.lineWidth = lineWidth;
        // // 渐变色 - 可自定义
        // var linGrad = ctx.createLinearGradient(
        //   circleX - radius - lineWidth,
        //   circleY,
        //   circleX + radius + lineWidth,
        //   circleY
        // );
        // linGrad.addColorStop(0.0, "#06a8f3");
        // //linGrad.addColorStop(0.5, '#9bc4eb');
        // linGrad.addColorStop(1.0, "#00f8bb");
        ctx.strokeStyle = "red";

        // 圆弧两端的款式
        ctx.lineCap = "round";
        // 圆弧
        ctx.arc(
          cx,
          cy,
          r,
          (Math.PI * 2) / 3,
          (Math.PI * 2) / 3 + (endAngle / 100) * ((Math.PI * 5) / 3),
          false
        );
        ctx.stroke();}
      // 圆形
      circle(circleX, circleY, radius);

      // 圆弧
      sector(circleX, circleY, radius, (Math.PI * 2) / 3, percent);
    },

心愿能帮忙你，持续致力加油鸭！！