说明:该文章仅供学习和参考使用,转载请注明出处
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