从上一篇的文章我们了解到了怎么使用 canvas 绘制一个圆。其实圆环相比就是它的边框加粗了而已，我们需要使用 stroke() 或 fill() 方法在画布上绘制实际的弧。而lineWidth则等于你需要的圆环大小即可。

设置圆环的颜色和大小

ctx.beginPath();
ctx.strokeStyle = '#99CC33';
ctx.lineCap = 'square';
ctx.closePath();
ctx.fill();
ctx.lineWidth = 10.0;

设置圆环百分比进度

从上面这个图，我们可以看出canvas的开始角并不在我们印象中圆的顶点位置，所以我们要设置开始角的位置在1.5*Math.PI开始，可以是顺时针，也可以是反时针方向。考虑到现在市面上的圆环进度条都是以顺时针开始。

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

从上面的的一个函数，我们要画圆，只需要sAngle为1.5*Math.PI.而结束角度则是我们要根据百分比来算的。把百分比分成4个部分，0-25%则在1.5*PI到0.25%到50%则在0-0.5*PI，50%-75%则在0.5*PI到1*PI。75%-100%则在1*PI到1.5*PI。

设置要转到的角度为变量current. 得到结束角为 eAngle = current*(2*PI) - PI/2;

第一种：圆饼百分比

代码 如下：

var bg = document.getElementById('bg');
var cxt = bg.getContext('2d'); //创建context对象
cxt.fillStyle = '#FF0000'; //设置或返回用于填充绘画的颜色、渐变或模式 染成红色
cxt.strokeStyle="#ff0000"; //设置或返回用于笔触的颜色、渐变或模式
//cxt.lineCap = 'square'; //设置或返回线条的结束端点样式
cxt.beginPath(); //起始一条路径，或重置当前路径
cxt.moveTo(100,100); //把路径移动到画布中的指定点，不创建线条
function draw(current){
//cxt.lineTo(100,0); //添加一个新点，然后在画布中创建从该点到最后指定点的线条
cxt.arc(100,100,80,-0.5*Math.PI,current*(2*Math.PI) - Math.PI/2,false); //绘制一个中心点为（100,100），半径为100，起始点为1.5*Math.PI,终点为2*Math.PI,顺时针的1/4圆
cxt.closePath(); //创建从当前点回到起始点的路径
cxt.fill();//填充当前绘图（路径）
//cxt.lineWidth = 10.0; //设置或返回当前的线条宽度
cxt.stroke(); //绘制已定义的路径
}
//draw(0.6);
var t=0;
var timer=null;
function loadCanvas(now){
  timer = setInterval(function(){
    if(t>now){
      clearInterval(timer);
    }else{
      draw(t);
      t+=0.005;
    }
  },5);
}
loadCanvas(0.8);
timer=null;

演示地址

第二种：圆环百分比

代码如下：

此处内容需要登录才可见

发现canvas可以做很多东西，不止是圆形、圆环、矩形，各种你想得到的图形都能做到。

后面将考虑一下如何使用矩形和三角形做出百分比进度条。这是一个很有意思的玩意。