canvas实现简单进度条

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();

}