js 绘制圆环进度条

<template>
      <!-- <canvas id="canvas" width="300" height="300">您的浏览器不支持 HTML5 canvas 标签。</canvas> -->
       <canvas class="canvas" width="100" height="100"></canvas>
</template>

<script>
export default {
    data(){
        return{
            precent1:50,// 当前的值
            num:0,
            ctx : "" ,

        }
    },
    props:{
        precent:{
            default(){
                return this.precent1
            }
        }
        
    },
    mounted(){
       this.init()
    },
    methods:{
     init(){
        var c=document.querySelector(".canvas");
        console.log(c);
            this.ctx=c.getContext("2d");
            this.draw()

     },
   

    //绘制轨道
     drawTrack() {
         this.ctx.save();
         this.ctx.beginPath()
         this.ctx.lineCap = 'round'
         this.ctx.lineWidth = 2
         this.ctx.strokeStyle = '#ccc'
         this.ctx.arc(50, 50, 30, 0, 2 * Math.PI)
         this.ctx.stroke()
         this.ctx.closePath();
         this.ctx.restore();
    },

    //绘制进度环
     drawProgress(num) {
         this.ctx.save();
         this.ctx.beginPath()
         this.ctx.lineCap = 'round'
         this.ctx.lineWidth = 2
         this.ctx.strokeStyle = '#2ba0fb'
        // context.arc(x,y,r,sAngle,eAngle,counterclockwise);   //x坐标,y坐标,半径,起始角,结束角,顺时针/逆时针
         this.ctx.arc(50, 50, 30, -Math.PI / 2, -Math.PI / 2 + 2 * num / 100 * Math.PI)
         this.ctx.stroke()
         this.ctx.closePath();
         this.ctx.restore();
    },

    //绘制文字
     drawText(num) {
         this.ctx.save();
         this.ctx.fillStyle = '#2ba0fb'

         this.ctx.font = '18px Helvetica'
         this.ctx.textAlign = 'center';
         this.ctx.fillText(num, 50, 57)
         this.ctx.restore();
    },

    //动画
     draw() {
        this.num += 1
        if (this.num < this.precent)
           this.draw()
        else
        this.num = this.precent
         this.ctx.clearRect(0, 0, 100, 100)
        this.drawTrack()
        this.drawProgress(this.num)
        this.drawText(this.num)
    }

    }  
}
</script>

    

使用方法：