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>