html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>canvas 圆环进度 </title>
- <link rel="stylesheet" href="">
- <style>
- *{padding: 0; margin: 0; }
- .circle{width: 200px;height: 200px;margin: 20em auto;position: relative;}
- canvas{display: block;margin: 0;position: absolute;background: white;left: 0;top: 0;}
- #canvas_1{z-index: 1 }
- #canvas_2{z-index: 2; background: transparent;transform:rotate(-90deg); }
- </style>
- </head>
- <body>
- <div class="circle">
- <canvas id="canvas_1" width="200" height="200"></canvas>
- <canvas id="canvas_2" width="200" height="200"></canvas>
- </div>
- <script>
- function inte(percent) {
- var canvas_1 = document.querySelector('#canvas_1');
- var canvas_2 = document.querySelector('#canvas_2');
- var ctx_1 = canvas_1.getContext('2d');
- var ctx_2 = canvas_2.getContext('2d');
- ctx_1.lineWidth = 10;
- ctx_1.strokeStyle = "#ccc";
- // 画底部的灰色圆环
- ctx_1.beginPath();
- ctx_1.arc(canvas_1.width / 2, canvas_1.height / 2, canvas_1.width / 2 - ctx_1.lineWidth / 2, 0, Math.PI * 2, false);
- ctx_1.closePath();
- ctx_1.stroke();
- if (percent <0 || percent> 100) {
- throw new Error('percent must be between 0 and 100');
- return
- }
- ctx_2.lineWidth = 10;
- ctx_2.strokeStyle = "#f90";
- var angle = 0;
- var timer;
- (function draw() {
- timer = requestAnimationFrame(draw);
- ctx_2.clearRect(0, 0, canvas_2.width, canvas_2.height)
- // 百分比圆环
- ctx_2.beginPath();
- ctx_2.arc(canvas_2.width / 2, canvas_2.height / 2, canvas_2.width / 2 - ctx_2.lineWidth / 2, 0, angle * Math.PI / 180, false);
- angle++;
- var percentAge = parseInt((angle / 360) * 100)
- if (angle> (percent / 100 * 360)) {
- percentAge = percent
- window.cancelAnimationFrame(timer);
- };
- ctx_2.stroke();
- ctx_2.closePath();
- ctx_2.save();
- ctx_2.beginPath();
- ctx_2.rotate(90 * Math.PI / 180)
- ctx_2.font = '30px Arial';
- ctx_2.fillStyle = 'red';
- var text = percentAge + '%';
- ctx_2.fillText(text, 80, -90);
- ctx_2.closePath();
- ctx_2.restore();
- })()
- }
- window.onload = inte(60);
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/14070/0f51b3417c8afd96c10f0c141ae26544.html