使用了H5中canvas绘制圆弧，文本，清除内容，搭配定时器灵活控制，从而实时改变其颜色和文本。
绘制文本时需要注意文本上下左右的居中，简单计算下就行。
完整代码如下：
<!doctype html><html><head><meta charset="UTF-8"><title>Document</title><style>canvas {background: #efefef;}</style></head><body><h1>绘制圆形进度条</h1><canvas id="canvas4" width="500" height="500"></canvas><script>var ctx = canvas4.getContext('2d');ctx.lineWidth = 30;ctx.font = '60px SimHei';var start = -90;var end = -90;var timer = setInterval(function(){//此处可以不清除已有内容ctx.clearRect(0,0,500,500);end += 10;//绘制圆弧ctx.beginPath();ctx.arc(250,250,100,start*Math.PI/180,end*Math.PI/180);if(end-start<120){ //1/3范围内ctx.strokeStyle = 'red';ctx.fillStyle = 'red';}else if(end-start<240){ //1/3~2/3范围内ctx.strokeStyle = 'orange';ctx.fillStyle = 'orange';}else { //2/3~3/3范围内ctx.strokeStyle = 'green';ctx.fillStyle = 'green';}ctx.stroke();//绘制文字var percentage = Math.floor((end-start)/360*100) + '%';var txtWidth = ctx.measureText(percentage).width; //获得文字的宽度ctx.fillText(percentage, 250-txtWidth/2, 250+30-10); //绘制文本if(end>=270){clearInterval(timer);}}, 200)</script></body></html>
