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);
    },

希望能帮助你，继续努力加油鸭！！