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

但願能幫助你，繼續努力加油鴨！！