canvas绘制圆形加载进度条

最新推荐文章于 2025-06-01 13:44:45 发布

原创

最新推荐文章于 2025-06-01 13:44:45 发布 · 2.7k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#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