转载：http://caibaojian.com/css3-radial-progress-bar.html

html:

<canvas id="xxb" width="200" height="200"></canvas>

js:

var bg = document.getElementById('xxb');
var ctx = bg.getContext('2d');
ctx.beginPath();
//在(100,100)处逆时针画一个半径为50，角度从0到180°的弧线
//ctx.arc(100,100,50,0*Math.PI,1*Math.PI,true);
ctx.lineWidth=10;
ctx.strokeStyle='#f00';
var grd = ctx.createLinearGradient(0,0,100,0);//从左到右
grd.addColorStop(0,"#ff0"); //起始颜色
grd.addColorStop(1,"#00ff00"); //终点颜色
//ctx.strokeStyle=grd;
//ctx.stroke();
//ctx.fillStyle='#00ff00';
ctx.fillStyle=grd;
//在(100,100)出逆时针画一个半径为50的实心圆
//ctx.arc(100,100,50,0*Math.PI,2*Math.PI,true);
//ctx.fill();
//在(100,100)出顺时针画一个半径为50的3/4圆弧
ctx.arc(100,100,50,0.75*Math.PI,2.25*Math.PI,false);
ctx.stroke();

ctx.beginPath();
//在(100,100)处逆时针画一个半径为50，角度从0到180°的弧线
//ctx.arc(100,100,50,0*Math.PI,1*Math.PI,true);
ctx.lineWidth=10;
ctx.strokeStyle='#000';
var grd = ctx.createLinearGradient(0,0,100,0);//从左到右
grd.addColorStop(0,"#ff0"); //起始颜色
grd.addColorStop(1,"#00ff00"); //终点颜色
//ctx.strokeStyle=grd;
//ctx.stroke();
//ctx.fillStyle='#00ff00';
ctx.fillStyle=grd;
//在(100,100)出逆时针画一个半径为50的实心圆
//ctx.arc(100,100,50,0*Math.PI,2*Math.PI,true);
//ctx.fill();
//在(100,100)出顺时针画一个半径为50的3/4圆弧
ctx.arc(100,100,50,0.75*Math.PI,2*Math.PI,false);
ctx.stroke();

结果：

四分之三圆