1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas环形进度条</title> <style> body { text-align: center; } </style> </head> <body> <canvas id="canvas" width="300" height="300">您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script> const ctx = document.getElementById('canvas').getContext('2d'); const num = 60;
function drawCycle(color, x, y, radius, start, end, order) { ctx.save(); ctx.beginPath() ctx.lineCap = 'round' ctx.lineWidth = 18 ctx.strokeStyle = color; ctx.arc(x, y, radius, start, end, order) ctx.stroke() ctx.closePath(); } function drawText() { ctx.save(); ctx.fillStyle = '#2ba0fb' ctx.font = '40px Helvetica' ctx.textAlign = 'center'; ctx.fillText(num + '%', 150, 160) }
drawCycle('#e5f1fa', 150, 150, 100, 0, 2 * Math.PI) drawCycle('#2ba0fb', 150, 150, 100, -Math.PI / 2, -Math.PI / 2 + 2 * num / 100 * Math.PI) drawText() </script> </body> </html>
|