JavaScript canvas绘制圆形加载进度条
作者：Yesir_mao
这篇文章主要为大家详细介绍了JavaScript 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.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.实现效果如下：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。