Vue canvas繪制圓形進(jìn)度條動畫加載

.center-box {

    display: flex;

    margin-top: 12px;

    .used-source {

      background-color: #ffffff;

      width: 50%;

      height: 294px;

      border-radius: 6px;

      .progress-box {

        display: flex;

        margin-top: 45px;

        .progress-content {

          width: 33.3333%;

          display: flex;

          flex-direction: column;

          justify-content: center;

          align-items: center;

          .title {

            margin-top: 28px;

            font-weight: 400;

            font-size: 16px;

            color: #333333;

          }

        }

      }

    }

}

<template>

  <div class="canvas">

    <canvas :id="id" width="220" height="220" style="width:110px;height:110px;"></canvas>

  </div>

</template>

<script>

export default {

  data () {

    return {

      num:0,

      canvas: '',

      context: '',

      cirX: '',

      cirY: '',

      rad: '',

      n: 0,

      speed: 450,

      r: 49

    }

  },

  props:[

    'percent', // 進(jìn)度條值

    'strokeStyle', // 進(jìn)度條值背景顏色

    'id'

  ],

  mounted () {

    this.canvas = document.getElementById(this.id)

    this.context = this.canvas.getContext("2d")

    this.context.scale(2,2);

    this.cirX = 55,//this.canvas.width/ 2

    this.cirY = 55,//this.canvas.height/ 2

    this.rad = Math.PI * 2 / 100

    this.DreamLoading()

  },

  created () {

  },

  methods:{

    //繪制最外層細(xì)圈

    writeCircle(){

        this.context.save(); //save和restore可以保證樣式屬性只運(yùn)用于該段canvas元素

        this.context.beginPath(); //開始路徑

        this.context.strokeStyle = '#f5f8fc'; //設(shè)置邊線的顏色

        this.context.lineWidth = 12;

        this.context.arc(this.cirX, this.cirY, this.r, 0, Math.PI * 2, false); //畫一個圓的路徑

        this.context.stroke(); //繪制邊線

        this.context.closePath();

    },

    //繪制文本

    writeText(n){

        this.context.save();

        this.context.font = "14px MicrosoftYaHei";

        this.context.fillStyle="#333333"; //字體顏色       

        this.context.fillText(n.toFixed(0) + "%", Number(n.toFixed(0)) === 100 ? this.cirX - 16 : this.cirX - 10, this.cirY + 6); //繪制實心

        //context.strokeStyle = "#49f";

        // context.strokeText(n.toFixed(0)+"%",cirX - 30 ,cirY +10); //繪制空心

        this.context.stroke();

        this.context.restore();

    },

    //繪制藍(lán)色外圈

    writeBlue(n){

        this.context.save();

        this.context.strokeStyle = this.strokeStyle;

        this.context.lineWidth = 12;

        this.context.lineCap = 'round';

        this.context.beginPath();

        this.context.arc(this.cirX, this.cirY, this.r, -Math.PI/2,-Math.PI/2+ this.rad * n, false);

        this.context.stroke();

        this.context.restore();

    },

    DreamLoading(){

        //清除所有，重新繪制

        this.context.clearRect(0,0,this.canvas.width,this.canvas.height)

        this.writeCircle();

        this.writeText(this.n);

        this.writeBlue(this.n)

        if(this.n <= this.percent){

            this.n = this.n + 0.4;

        }else {

          return this.n = 0;

        }

        requestAnimationFrame(this.DreamLoading);

    }

  }

}

</script>

<style scoped>

.canvas {

    width: 110px;

    height: 110px;

}

</style>