从上一篇的文章我们了解到了怎么使用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;
默认HTML代码为：
<canvas id="bg" width="200" height="200"></canvas>
第一种：圆饼百分比
代码如下：
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){ draw(now);//最后一次绘制 clearInterval(timer); }else{ draw(t); t+=0.005; } },5); } loadCanvas(0.8); timer=null;
第二种：圆环百分比
代码如下：
var bg = document.getElementById('bg'); var ctx = bg.getContext('2d'); var circ = Math.PI * 2; var quart = Math.PI / 2; var imd = null; var circ = Math.PI * 2; var quart = Math.PI / 2; ctx.beginPath(); ctx.strokeStyle = '#99CC33'; ctx.lineCap = 'square'; ctx.closePath(); ctx.fill(); ctx.lineWidth = 10.0; imd = ctx.getImageData(0, 0, 240, 240); function draw(current){ ctx.putImageData(imd, 0, 0); ctx.beginPath(); ctx.arc(120, 120, 70, -(quart), ((circ) * current) - quart, false); ctx.stroke(); } //draw(0.6); var t=0; var timer=null; function loadCanvas(now){ timer = setInterval(function(){ if(t>now){ draw(now);//最后一次绘制 clearInterval(timer); }else{ draw(t); t+=0.01; } },20); } loadCanvas(0.8); timer=null;
发现canvas可以做很多东西，不止是圆形、圆环、矩形，各种你想得到的图形都能做到。
后面将考虑一下如何使用矩形和三角形做出百分比进度条。这是一个很有意思的玩意。
