canvas实现简单进度条效果如下：
代码如下：在线试一试
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");
const deg = Math.PI / 180;
let index = 0;
fram();
function fram() {
index++;
if (index <= 360) {
requestAnimationFrame(fram);
}
const txt = Math.round((index / 360) * 100);
ctx.beginPath();
ctx.clearRect(0, 0, 600, 600);
ctx.beginPath();
ctx.arc(200, 200, 100, 0, 360 * deg);
ctx.strokeStyle = "#f5f5f5";
ctx.lineWidth = 16;
ctx.stroke();
ctx.beginPath();
ctx.arc(200, 200, 100, 0, index * deg);
ctx.strokeStyle = "#1890ff";
ctx.lineWidth = 16;
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = 1;
ctx.fillStyle = "#1890ff";
ctx.fillText(txt + "%", 200, 200);
ctx.font = "30px normal";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.closePath();
}
