成果如如下：
源码如下，间接复制保留为 html 文件即可预览：
<!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><canvas id="canvas" width="300" height="300"> <p>道歉，您的浏览器不反对canvas</p> </canvas> <script> /** * 生成环形进度条 */ function toCanvas(id, color, progress) { //canvas进度条 var canvas = document.getElementById(id), ctx = canvas.getContext("2d"), percent = progress, //最终百分比 circleX = canvas.width / 2, //核心x坐标 circleY = canvas.height / 2, //核心y坐标 radius = 80, //圆环半径 cradius = 75, // canvas半径 lineWidth = 6, //圆形线条的宽度 fontSize = 20; //字体大小 //两端圆点 // function smallcircle1(cx, cy, r) { // ctx.beginPath(); // //ctx.moveTo(cx + r, cy); // ctx.lineWidth = 1; // ctx.fillStyle = '#06a8f3'; // ctx.arc(cx, cy, r, 0, Math.PI * 2); // ctx.fill(); // } // function smallcircle2(cx, cy, r) { // ctx.beginPath(); // //ctx.moveTo(cx + r, cy); // ctx.lineWidth = 1; // ctx.fillStyle = '#fff'; // ctx.arc(cx, cy, r, 0, Math.PI * 2); // ctx.fill(); // } //画圆 function circle(cx, cy, r, sAngle, eAngle, bColor = '#eee') { ctx.beginPath(); //ctx.moveTo(cx + r, cy); ctx.lineWidth = lineWidth; ctx.strokeStyle = bColor; // ctx.lineCap = 'round'; // ctx.arc(cx, cy, r, Math.PI * 1, Math.PI * 2); ctx.arc(cx, cy, r, sAngle, eAngle); ctx.stroke(); } //画弧线 function sector(cx, cy, r, startAngle, endAngle, _lineWidth) { ctx.beginPath(); //ctx.moveTo(cx, cy + r); // 从圆形底部开始画 ctx.lineWidth = _lineWidth; // 渐变色 - 可自定义 // var linGrad = ctx.createLinearGradient( // circleX-radius-lineWidth, circleY, circleX+radius+lineWidth, circleY // ); // linGrad.addColorStop(0.0, '#06a8f3'); // //linGrad.addColorStop(0.5, '#9bc4eb'); // linGrad.addColorStop(1.0, '#00f8bb'); // ctx.strokeStyle = linGrad; // 进度条色彩 ctx.strokeStyle = color; //圆弧两端的款式 // ctx.lineCap = 'round'; //圆弧 ctx.arc( cx, cy, r, startAngle, (Math.PI * (1.5 - ((1.5 / 100) * process))), true ); ctx.stroke(); } //刷新 function loading() { if (process >= percent) { clearInterval(circleLoading); } //革除canvas内容 ctx.clearRect(0, 0, circleX * 2, circleY * 2); //两头的字 ctx.font = fontSize + 'px April'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillStyle = '#999'; ctx.fillText(parseFloat(process).toFixed(0) + '%', circleX, circleY - 10); ctx.font = (fontSize - 4) + 'px April'; ctx.fillStyle = '##a7a7a7'; ctx.fillText('平安', circleX, circleY + 20); circle(circleX, circleY, radius + 14, 0, Math.PI * 2, '#e1f7f3'); //圆形 circle(circleX, circleY, radius, 0, Math.PI * 1.5, '#6bd8b3'); //圆弧 sector(circleX, circleY, radius-8, Math.PI * 1.5, 0, lineWidth * 2); //两端圆点 // smallcircle1(cradius + Math.cos(2 * Math.PI / 360 * 120) * radius, cradius + Math.sin(2 * Math.PI / 360 * 120) * // radius, 0); // smallcircle2(cradius + Math.cos(2 * Math.PI / 360 * (120 + process * 3)) * radius, cradius + Math.sin(2 * Math.PI / // 360 * (120 + process * 3)) * radius, 2); //管制完结时动画的速度 if (process / percent > 0.90) { process += 0.30; } else if (process / percent > 0.80) { process += 0.55; } else if (process / percent > 0.70) { process += 0.75; } else { process += 1.0; } } var process = 0.0; //进度 var circleLoading = window.setInterval(function() { loading(); console.log(11) }, 20); // loading(); } toCanvas('canvas','#6bd8b3', 32); </script></body></html>