vue环形进度条

/*
* canvas对象item,
* 进度条pro,
* 进度条起始颜色colorStart,
* 进度条结束颜色colorEnd
*/
export const start=(item,pro,colorStart,colorEnd)=>{
   
    var circularProgressBar = new CircularProgressBar(item,colorStart,colorEnd);
    //进度条 范围：0-150
    circularProgressBar.refresh(pro);
};

class CircularProgressBar{
   
    constructor(item,colorStart,colorEnd) {
   
        var canvas = item;
        var ctx = canvas.getContext('2d')
        var width = canvas.clientWidth;
        var height = canvas.clientHeight;
        var minSizeValue = width;
        if (minSizeValue > height) {
   
            minSizeValue = height;
        }
        var centerValue = minSizeValue / 2;

        var _this = ctx;
        ctx.lineWidth = 4;
        ctx.bgLineWidth = _this.lineWidth / 2;
        //圆环起始位置
        ctx.startAngleFloat = 0.8; //范围0.5-1.5
        //圆环结束位置
        ctx.endAngleFloat = 2.2; //范围1.5-2.5;

        function bg() {
   
            ctx.beginPath();
            ctx.arc(width / 2, height / 2, centerValue - _this.bgLineWidth / 2, _this.startAngleFloat * Math.PI, _this.endAngleFloat *
                Math.