SOURCE

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

const x = canvas.width / 2;
const y = canvas.height;
const radius = 100;
const lineWidth = 10;
const startAngle = - Math.PI ;
const endAngle = Math.PI * 2;

const gradient = ctx.createLinearGradient(x - radius, y, x + radius, y);
gradient.addColorStop(0, "#47C922");
gradient.addColorStop(1, "#00923E");


// 进度为30%
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, startAngle + (endAngle - startAngle) );
ctx.lineWidth = lineWidth;
ctx.strokeStyle = "#ccc"; // 将进度条颜色改为红色
ctx.lineCap = "round"; // 将线条端点改为圆形
ctx.stroke();

const percent = 0.5; // 进度为30%
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, startAngle + (endAngle - startAngle) * percent);
ctx.lineWidth = 13;
ctx.strokeStyle = gradient; // 将进度条颜色改为红色
ctx.lineCap = "round"; // 将线条端点改为圆形
ctx.stroke();

// 绘制文本
ctx.fillStyle = "#f00"; // 将文本颜色改为红色
ctx.font = "20px Arial";
ctx.textAlign = "center";
ctx.fillText("住吧分", x, y -10); 




// //画一个圆弧
// const canvas = document.getElementById("myCanvas");
// const ctx = canvas.getContext("2d");

// const x = canvas.width / 2;
// const y = canvas.height / 2;
// const radius = 50;
// const lineWidth = 10;
// const startAngle = Math.PI / 2 - Math.PI / 180 * 100; // 起始角度为 80 度
// const endAngle = Math.PI / 2 + Math.PI / 180 * 100; // 结束角度为 260 度

// // 将坐标系沿着 y 轴对称
// ctx.transform(1, 0, 0, -1, 0, canvas.height);

// ctx.beginPath()
// ctx.arc(x, y, radius, startAngle, (endAngle - startAngle) )
// ctx.lineWidth = 13
// ctx.strokeStyle = '#ccc'
// ctx.lineCap = 'round'
// ctx.stroke()


// // 绘制圆弧
// ctx.beginPath();
// ctx.arc(x, y, radius, startAngle, (endAngle - startAngle) * 0.1);
// ctx.lineWidth = lineWidth;
// ctx.strokeStyle = "red";
// ctx.lineCap = 'round'
// ctx.stroke();

<canvas id="myCanvas" width="800" height="200"></canvas>