Sublime Text
Chrome浏览器调试
上面效果的实现过程，简单说先用canvas绘制弧度arcCtx.arc（0）和数字progressValue（0），然后利用requestAnimationFrame在执行每一帧时候（requestAnimationFrame(drawArc)），弧度和数字都增加0.01（n += 0.01），从而实现动态画圆和显示百分比数值。详细代码如下（只分析关键代码）： 1.当canvas出现宽高不相等时候，需要获取较小值的一半作为半径画圆弧，不然会导致溢出（var maxValue = Math.min(arcCanvas.width, arcCanvas.height)）； 2.每一帧执行都要清除画布内容（arcCtx.clearRect），不然会导致内容叠加； 3.每一帧执行都要重置当前路径（arcCtx.beginPath()），不然会导致路径混乱； 4.绘画圆弧时候（arcCtx.arc），半径要去掉线框，不然会导致溢出； 5.达到设置的百分比（progress），需要取消动画（cancelAnimationFrame），不然动画会一直执行下去，影响性能。
下面效果的实现过程，简单说先用canvas绘制矩形fillRect（0--带颜色）和数字circleValue（0），同时对矩形剪切成圆形（circleCtx.arc和circleCtx.clip），然后利用requestAnimationFrame在执行每一帧时候（requestAnimationFrame(drawCircle)），高度和数字都增加0.01（k += 0.01），从而实现动态增加和显示百分比数值。详细代码如下（只分析关键代码）： 1.每一帧执行都要清除画布内容（circleCtx.clearRect），不然会导致内容叠加； 2.每一帧执行都要重置当前路径（circleCtx.beginPath），不然会导致路径混乱； 3.达到设置的百分比（circleProgress），需要取消动画（cancelAnimationFrame），不然动画会一直执行下去，影响性能。 Tips：canvas的宽高须一致，不然效果不美观。