要帮助同事写一个弧度的进度条，进度条顶部有一个小圆，具体如下
需要指出的是，我们canvas的绘制是需要弧度，所以我们代码中使用角度，等待绘制的时候再砖话为弧度值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<input type="range" id="cowbell" name="cowbell" min="0" max="100" value="50" step="1">
<label for="cowbell">拖拽角度变化</label>
</div>
<canvas id="canvas"></canvas>
<script>
const cowbell = document.getElementById("cowbell");
cowbell.addEventListener("input", (a, c) => {
console.log(cowbell.value)
draw(cowbell.value)
});
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 500;
let conterw = canvas.width / 2;//弧度的中心坐标
let conterh = canvas.height / 2;//弧度的中心坐标
let sAngle = 150;//其实角度
let eAngle = 390;//结束角度
let nAngle = 100;//以sAngle为基准的角度
let leng = 100;//半径
draw(50)
//绘制百分比进度
function draw(percentage) {
//清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
//结束角度 - 起始角度 = 中间区域的范围值
//中间区域的范围值 / 100 *当前进度百分比
//得到百分比下的角度值
nAngle = (eAngle - sAngle) / 100 * percentage;
//绘制一个弧度进度条底色
drawArc(sAngle, eAngle, eAngle, conterw, conterh, '#e1e8ee')
//绘制一个弧度有进度的
drawArc(sAngle, eAngle, nAngle, conterw, conterh, '#6f78cc')
//绘制圆的坐标
let { x, y } = getArcFillXY(sAngle, eAngle, leng, conterw, conterh, nAngle)
//绘制圆
drawArcFill(x, y);
}
console.log()
//绘制弧度
function drawArc(sAngle, eAngle, nAngle, conterw, conterh, strokeStyle = '#e1e8ee') {
ctx.beginPath();
//在基础sAngle上加上差量的角度
nAngle += sAngle;
//控制最小的角度
if (sAngle > nAngle) {
nAngle = sAngle;
}
// 控制最大的角度
if (eAngle < nAngle) {
nAngle = eAngle;
}
//绘制角度
ctx.arc(conterw, conterh, leng, rad(sAngle), rad(nAngle), false);
ctx.strokeStyle = strokeStyle;
ctx.lineWidth = 5;
ctx.stroke();
ctx.closePath();
}
function drawArcFill(x, y) {
//绘制一个半径为5得红色圆形
ctx.beginPath();
ctx.arc(x, y, 5, 0, 2 * Math.PI, false);
ctx.fillStyle = 'red';
ctx.fill();
ctx.closePath();
}
//将上述的圆形放在进度条的头部,随着弧形的角度一起变化
/**
*
*/
function getArcFillXY(sAngle, eAngle, leng, conterw, conterh, nAngle) {
//半径是
let x = conterw - leng;
let y = conterh;
//在基础sAngle上加上差量的角度
nAngle += sAngle
//控制最小的角度
if (sAngle > nAngle) {
nAngle = sAngle;
}
// 控制最大的角度
if (eAngle < nAngle) {
nAngle = eAngle;
}
//差值角度
let cAngle = nAngle - sAngle;
x = Math.cos(rad(nAngle)) * leng + conterw;
y = Math.sin(rad(nAngle)) * leng + conterh;
return {
x, y
}
}
//度数转化为弧度得方法
function rad(sAngle) {
return sAngle * Math.PI / 180;
}
</script>
</body>
</html>
