Canvas实现的圆形时间进度条

最近有一个答题的需求，里面有个圆形进度条的需求,样式如下：

圆形进度

Canvas 实现

这个需求第一想到的就是Canvas来实现，在网上找了些代码不是太符合我们的需求，于是就自己来实现一个精简版：

function Countdown() {
    // 设置默认参数
    this.settings = {
        id: "canvas",         // ID，canvas一定要有ID属性
        size: 130,            // 绘制圆形的最大尺寸，宽=高
        backgroundColor: "#ff0000",//背景色
        borderWidth: 3,       // 边框宽度
        fontColor: "#ffffff",    // 字体颜色
        ringColor: "#F16822", // 进度条环形颜色
        ringWidth: 5,           //进度条宽度
        fontSize: 17,
        time: 20
    }
}

Countdown.prototype.init = function (opt) {
    this.obj = document.getElementById(this.settings.id);
    this.callback = opt.callback;
    this.ctx = this.obj.getContext("2d");
    extend(this.settings, opt.settings);
    this.countdown();
    this.obj.width = this.settings.size;
    this.obj.height = this.settings.size;
  //以下代码是用来解决移动端显示不清晰的问题（如果是PC或者Paid版就不需要这个,如果都需要请自行添加判断）
    let dpr = window.devicePixelRatio;
    let { width: cssWidth, height: cssHeight } = this.obj.getBoundingClientRect();
    this.obj.width = dpr * cssWidth;
    this.obj.height = dpr * cssHeight;
    this.obj.style.width = this.obj.width + "px";
    this.obj.style.height = this.obj.height + "px";
    this.ctx.scale(dpr, dpr);
};

// 绘制进度条动画
Countdown.prototype.drawAnimate = function () {
    // 旋转的角度
    let deg = Math.PI / 180;
    let v = schedule * 360,
        startAng = -90,
        endAng = -90 + v;

    this.ctx.beginPath();
    this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 - this.settings.borderWidth -       
    this.settings.ringWidth / 2, startAng * deg, endAng * deg, false);//如果你需要逆时针，请改为true
    this.ctx.lineWidth = this.settings.ringWidth;//这里使用边框方式来实现
    this.ctx.lineCap = "round";
    this.ctx.strokeStyle = this.settings.ringColor;
    this.ctx.stroke();
    this.ctx.closePath();

};
// 绘制文字
Countdown.prototype.strokeText = function (text) {
    this.ctx.textAlign = "center";
    this.ctx.textBaseline = "middle";
    this.ctx.font = this.settings.fontSize + "px" + " microsoft yahei";
    this.ctx.fillStyle = this.settings.fontColor;
    this.ctx.fillText(text + 's', this.settings.size / 2, this.settings.size / 2);
};
// 进度条动画
Countdown.prototype.countdown = function () {
    let oldTime = new Date(),
        allMs = this.settings.time * 1000;// 如30*1000=30 000ms
    timer = setInterval(() => {
        let currentTime = new Date();
        // 步长=（当前的时间-过去的时间）/总秒数
        schedule = (currentTime - oldTime) / allMs;
        this.schedule = schedule;
        this.drawAll(schedule);
        if (currentTime - oldTime > allMs) {
            clearInterval(timer);
            this.drawAll(schedule);
            this.callback();
        }
    }, 50);
};

// 绘制所有
Countdown.prototype.drawAll = function (schedule) {
    let text = schedule >= 1 ? 0 : parseInt(this.settings.time * (1 - schedule) + 1);
    // 清除画布
    this.ctx.clearRect(0, 0, this.settings.size, this.settings.size);
    this.drawAnimate();
    this.strokeText(text);
};

// 对象拷贝
function extend(obj1, obj2) {
    for (let attr in obj2) {
        obj1[attr] = obj2[attr];
    }
}


//代码调用
let size = parseInt($(window).width() * 0.16);
            let ctd = new Countdown();
            ctd.init({
                settings: {
                    fontColor: "red",
                    size: size,
                    fontSize: 17,
                    time: 15
                },
                callback() {
                    //此处是进度结束的回调
                },
            });

打完收工，如果对你有帮助，请多多关注。