html代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <canvas id="pro" width="400" height="300"></canvas> 9 </body> 10 </html>
js代码：
第一步：
var c=document.getElementById("pro"),
pro=0,
ctx=c.getContext("2d");
//画灰色的圆
ctx.beginPath();
ctx.arc(200,200,190,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle=‘#e3eaf2‘;
ctx.fill();
效果图如下：
第二步：
function drawCricle(ctx,percent){
//画进度环
ctx.beginPath();
ctx.moveTo(200,200);
ctx.arc(200,200,190,Math.PI*0.8,Math.PI*(0.8+2*percent/200));
ctx.closePath();
ctx.fillStyle=‘#ff4b88‘;
ctx.fill();
//画内填充圆
ctx.beginPath();
ctx.arc(200,200,175,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle=‘#fff‘;
ctx.fill();
}
drawCricle(ctx,60);//执行这个函数
效果图如下：
第三步：让它动起来
function animate(){
requestAnimationFrame(function(){
pro=pro+1;
drawCricle(ctx,pro);
if(pro<60){
animate();
}
});
}
如果需加入百分比文字：
//将这段代码加到drawCricle函数里面
ctx.font = "bold 20pt Microsoft YaHei";
ctx.fillStyle = ‘#333‘;
ctx.textAlign = ‘center‘;
ctx.textBaseline = ‘middle‘;
ctx.moveTo(200, 200);
ctx.fillText(process + ‘%‘, 200, 200);
效果如下：
完整代码如下：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <canvas id="pro" width="400" height="400"></canvas>
9 <script>
10 (function(){
11 var c=document.getElementById("pro"),
12 pro=0,
13 ctx=c.getContext("2d");
14
15 //画灰色的圆
16 ctx.beginPath();
17 ctx.arc(200,200,80,0,Math.PI*2);
18 ctx.closePath();
19 ctx.fillStyle=‘#f6f6f6‘;
20 ctx.fill();
21
22 function animate(){
23 requestAnimationFrame(function(){
24 pro=pro+1;
25 drawCricle(ctx,pro);
26 if(pro<60){
27 animate();
28 }
29 });
30 }
31
32 function drawCricle(ctx,percent){
33 //画进度环
34 ctx.beginPath();
35 ctx.moveTo(200,200);
36 ctx.arc(200,200,80,Math.PI*0.8,Math.PI*(0.8+2*percent/200));
37 ctx.closePath();
38 ctx.fillStyle=‘#ff9600‘;
39 ctx.fill();
40
41 //画内填充圆
42 ctx.beginPath();
43 ctx.arc(200,200,75,0,Math.PI*2);
44 ctx.closePath();
45 ctx.fillStyle=‘#fff‘;
46 ctx.fill();
47
48 //填充文字
49 ctx.font = "bold 20pt Microsoft YaHei";
50 ctx.fillStyle = ‘#333‘;
51 ctx.textAlign = ‘center‘;
52 ctx.textBaseline = ‘middle‘;
53 ctx.moveTo(200, 200);
54 ctx.fillText(pro + ‘%‘, 200, 200);
55 }
56 animate();
57 }())
58 </script>
59 </body>
60 </html>
时间： 2024-08-25 06:59:56