html
<html>
<head>
<meta charset='UTF-8'>
<script src="http://www.oxcoder.com/sys/js/libs/jquery-1.11.0.min.js"></script>
</head>
<body>
<canvas id='canvas'></canvas>
</body>
</html>js
<script>
(function(){
var canvas=$('canvas');//获取画布标签
var cav=canvas.getContext('2d');//设置画布2维场景
var num=0;//声明角度控制器变量
//现在我们用定时器来启动咱们的程序，查看效果
setInterval(function(){
num++;
//因为我把圆 360度分成了 100份，也是方便计算，所以只需要判断它是否大于 100
if(num>100){
num=0;
}
jindutiao(canvas,cav,100,100,50,50,40,num);
},100)
})()
/*参数，
canvas 表示html 的画布对象，
cav 表示画布场景对象，
width 表示你要设置的画布的宽度，
height 表示你要设置的画布高度，
x 表示你要绘制的圆心在画布的横向座标值，
y 表示你要绘制的圆心在画布的纵向座标值，
r 表示你要绘制的圆的半径,
move_r 加载进度的角度*/
function jindutiao(canvas,cav,width,height,x,y,r,move_r){
canvas.setAttribute('width',width);//设置画布宽度
canvas.setAttribute('height',height);//设置画布高度
cav.clearRect(0,0,canvas.Width,canvas.Height);//清楚画布，从新绘制
//绘制动画路径
cav.beginPath();
cav.lineWidth=10;//设置当前路径的宽度（粗细）
cav.strokeStyle='#cccccc';//设置笔触颜色
//arc()方法创建弧/曲线(用于创建圆或部分圆)，参数分别是（圆心X座标，圆心Y座标，半径，圆的开始角度，圆的结束角度）
cav.arc(x,y,r,0,2*Math.PI);
cav.stroke();//绘制
//绘制加载进度
cav.beginPath();
cav.lineWidth=10;
cav.strokeStyle='red';
cav.arc(x,y,r,-90*Math.PI/180,(move_r*3.6-90)*Math.PI/180);
cav.stroke();
//绘制进度提示文字
cav.font='20px Arial';
cav.fillStyle='#747474';
cav.textBaseline='middle';
cav.textAlign='center';
cav.fillText(move_r+'%',x,y);
}
</script>