html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="pro" width="400" height="300"></canvas>
</body>
</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);
效果如下：
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="pro" width="400" height="400"></canvas>
<script>
(function(){
var c=document.getElementById("pro"),
pro=0,
ctx=c.getContext("2d"); //画灰色的圆
ctx.beginPath();
ctx.arc(200,200,80,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle='#f6f6f6';
ctx.fill(); function animate(){
requestAnimationFrame(function(){
pro=pro+1;
drawCricle(ctx,pro);
if(pro<60){
animate();
}
});
} function drawCricle(ctx,percent){
//画进度环
ctx.beginPath();
ctx.moveTo(200,200);
ctx.arc(200,200,80,Math.PI*0.8,Math.PI*(0.8+2*percent/200));
ctx.closePath();
ctx.fillStyle='#ff9600';
ctx.fill(); //画内填充圆
ctx.beginPath();
ctx.arc(200,200,75,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle='#fff';
ctx.fill(); //填充文字
ctx.font = "bold 20pt Microsoft YaHei";
ctx.fillStyle = '#333';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.moveTo(200, 200);
ctx.fillText(pro + '%', 200, 200);
}
animate();
}())
</script>
</body>
</html>
