JavaScriptcanvas绘制圆形加载进度条

Catherine ·

更新时间:2024-09-20

· 945 次阅读

本文实例为大家分享了JavaScript canvas绘制圆形加载进度条的具体代码，供大家参考，具体内容如下

1.需求：通过canvas绘制一个圆形的进度条

2.实现思路：

2.1 绘制灰色底框

2.2 创建变量保存结束角度值和加载进度值

2.3 创建定时绘制进度条

2.3.1 修改结束角度
2.3.2 开始新路径绘制
2.3.3 绘制加载圆环

3.实现过程如下：

css样式设置

body {
            text-align: center;
        }
        canvas {
            background: #ffffff;
        }

4.html如下：

<canvas id="circle" width="500" height="400"></canvas>

5.js实现如下：

var circle = document.getElementById("circle");
        var ctx = circle.getContext("2d");
        //结束角度
        var end = -90;
        // 创建变量，进度值1%
        var load = 0;
        // 创建定时器，绘制进度条
        var timer = setInterval(function () {
            //每次加载前清除画布
            ctx.clearRect(0, 0, 500, 400);
            ctx.beginPath();
            // 灰色底框
            ctx.strokeStyle = "#eee"; //底框的背景颜色
            ctx.lineWidth = 10; //底框的宽度
            //底框显示的位置想x,y,r,start,end
            ctx.arc(250, 200, 100, 0, 2 * Math.PI);  
            ctx.stroke(); //绘制底框，空心圆
            // 修改结束角度
            end += 3.6;
            // 开始新的路径
            ctx.beginPath();
            // 绘制新的圆环
            ctx.strokeStyle = "lightgreen";
            ctx.lineWidth = 10;
            //从顶点位置开始
            ctx.arc(250, 200, 100, -90 * Math.PI / 180, end * Math.PI / 180);
            ctx.stroke();
            // 设置中间的文字字体和大小
            ctx.font = "18px SimHei";
            load++;
            // 设置图形文字
            ctx.fillText("已加载完成：" + load + "%", 180, 208);
            if (load == 100) {
                clearInterval(timer);
            }
        }, 200);

6.实现效果如下：