本文介绍如何使用 JavaScript 的 Canvas API 绘制一个圆形的加载进度条。通过设置灰色底框、动态计算角度并定时刷新画布，实现从 0% 到 100% 的加载动画效果。包含完整的 HTML、CSS 及 JS 代码实现。
Canvas 圆形加载进度条实现
本文分享一段使用 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. JavaScript 核心实现代码如下：
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. 最终运行效果展示。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。