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() {
//此处是进度结束的回调
},
});复制代码打完收工，如果对你有帮助，请多多关注。
作者：ModeCai
链接：https://juejin.cn/post/7016587617143619614