soadesA 随记 0 评论 37 阅读 4 天前举报
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style>
- #progress{
- border: 1px solid red;
- }
- </style>
- </head>
- <body>
- <canvas id="progress" width="200" height="200"></canvas>
- <script>
- var canvas = document.getElementById("progress");
- var cxt = canvas.getContext("2d");
- var progress=0;
- // 绘制灰色的背景
- cxt.beginPath();
- cxt.fillStyle = "#ccc";
- cxt.arc(100,100,80,0,2*Math.PI);
- cxt.fill();
- cxt.closePath();
- function move(){
- window.requestAnimationFrame(function(){
- progress += 1;
- // 绘制橙色圆环
- cxt.beginPath();
- cxt.lineWidth="8";
- cxt.strokeStyle = "orange";
- cxt.arc(100, 100, 75, Math.PI * 1.5, Math.PI * (1.5 + 2 * progress / 100 ));
- cxt.stroke();
- cxt.closePath();
- // 绘制白色的圆
- cxt.beginPath();
- cxt.arc(100, 100, 75, 0, Math.PI * 2);
- cxt.closePath();
- cxt.fillStyle = '#fff';
- cxt.fill();
- // 内填充字体
- cxt.font="bold 20pt Microsoft YaHei";
- cxt.fillStyle = "#333";
- cxt.textAlign = 'center';
- cxt.textBaseline = 'middle';
- cxt.fillText (progress+"%",100,100);
- if(progress<98){
- move()
- }
- })
- }
- move()
- </script>
- </body>
- </html>
HTML5
JavaScript
来源: http://www.qdfuns.com/note/50709/2a2c2e2f975ff6a25e172d9bdc63e535.html