scd_tools_go/service/static/js/progress.js

let Progress = function (init) {
    this.init(init)
};
Progress.prototype = {
    init: function (init) {
        this.el = init.el;//元素ID
        let cvsElement = document.getElementById(this.el),//获取元素
            ctx = cvsElement.getContext("2d"),//获取画笔
            width = cvsElement.width,//元素宽度
            height = cvsElement.height,//元素高度
            degActive = 0,//动态线条
            timer = null;//定时器
        //停止时的角度
        init.deg >= 0 && init.deg <= 100 ? this.deg = init.deg : this.deg = 100;
        //线宽
        init.lineWidth !== undefined ? this.lineWidth = init.lineWidth : this.lineWidth = 20;

        //判断宽高较小者
        this.wh = width > height ? height : width;

        //设置圆的半径，默认为宽高较小者
        init.circleRadius > 0 && init.circleRadius <= this.wh / 2 - this.lineWidth / 2 ?
            this.circleRadius = init.circleRadius : this.circleRadius = this.wh / 2 - this.lineWidth / 2;

        //绘制线的背景颜色
        init.lineBgColor !== undefined ?
            this.lineBgColor = init.lineBgColor : this.lineBgColor = '#ccc';

        //绘制线的颜色
        init.lineColor !== undefined ?
            this.lineColor = init.lineColor : this.lineColor = '#009ee5';

        //绘制文字颜色
        init.textColor !== undefined ?
            this.textColor = init.textColor : this.textColor = '#009ee5';

        //绘制文字大小
        init.fontSize !== undefined ?
            this.fontSize = init.fontSize : this.fontSize = parseInt(this.circleRadius / 2);

        //执行时间
        this.timer = init.timer;

        //清除锯齿
        if (window.devicePixelRatio) {
            cvsElement.style.width = width + "px";
            cvsElement.style.height = height + "px";
            cvsElement.height = height * window.devicePixelRatio;
            cvsElement.width = width * window.devicePixelRatio;
            ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
        }

        //设置线宽
        ctx.lineWidth = this.lineWidth;

        //启动定时器
        timer = setInterval(function () {
            ctx.clearRect(0, 0, width, height);//清除画布
            ctx.beginPath();//开始绘制底圆
            ctx.arc(width / 2, height / 2, this.circleRadius, 1, 8);
            ctx.strokeStyle = this.lineBgColor;
            ctx.stroke();
            ctx.beginPath();//开始绘制动态圆
            ctx.arc(width / 2, height / 2, this.circleRadius, -Math.PI / 2, degActive * Math.PI / 180 - Math.PI / 2);
            ctx.strokeStyle = this.lineColor;
            ctx.stroke();
            let txt = (parseInt(degActive * 100 / 360) + "%");//获取百分比
            ctx.font = this.fontSize + "px SimHei";
            let w = ctx.measureText(txt).width;//获取文本宽度
            let h = this.fontSize / 2;
            ctx.fillStyle = this.textColor;
            ctx.fillText(txt, width / 2 - w / 2, height / 2 + h / 2);
            if (degActive >= this.deg / 100 * 360) {//停止定时器
                clearInterval(timer);
                timer = null;
            }
            degActive++;
        }.bind(this), this.timer);
    }
};