今天分享一个圆形进度条的写法。当然，这只是一个可移动的静态进度条。如果你喜欢，你可以添加背景数据。这种进度条到处写都很简单，但更多的只是为了美观，我们可以移动这个。前提是你知道canvas的属性、方法和一些基本的jsAPI。当然，为了保证一些忘记的朋友能记住，我在前面列一个清单。属性及方法说明getContext()返回在画布上绘制的环境strokeStyle画笔（绘制图形）颜色或样式的属性lineWidth设置线段粗细的属性save()保存所有状态的方法canvas(push)beginPath()创建新路径的方法arc(originx,originy,radius,startangle,endangle,defaultfalseclockwise)绘制圆弧路径的方法stroke()绘制路径的方法closePath()closedrawingpathrestore()方法恢复到最近保存的状态（popping）fillStyle颜色和样式属性font当前字体样式属性toFixed(num)roundNumber到指定小数位数的数字查看上表并开始绘制图形、图形绘制除了canvas元素外，还有以下几个部分。我先单独写代码：(1)创建canvas元素，先创建一个canvas标签，给宽高。绘制环进度的宽高可以保持一致，然后获取元素，创建画布。注意这里canvas元素命名为mycanvas，绘制的canvas对象命名为ctx。//下面是js代码varmycanvas=document.getElementById('mycanvas');varctx=mycanvas.getContext('2d');(2)绘图准备工作如果需要在绘图前做一些准备工作，找到“画布的中心点”，进度条将进度条按照进度比例分成100份，指定初始加载步长（长度）按100%完成，注意后期初始化可以改成0//找到画布中心点varcanvasX=mycanvas.width/2;varcanvasY=mycanvas.height/2;//进度条为100%，所以把一个圆度分成100份varprogress=Math.PI*2/100;//指定初始加载步长varsteps=0.5;(3)画环底层先画进度环底层的浅灰色环，这是进度条的路径。可以先指定绘制的颜色和线宽，这两个属性不会影响后面方法的顺序。ctx.strokeStyle='#dddddd';ctx.lineWidth=20;ctx.save();ctx.beginPath();ctx.arc(canvasX,canvasY,90,0,Math.PI*2,false)ctx.stroke();ctx.closePath();ctx.restore();(4)绘制进度层需要定义进度层绘制的颜色，进度条的粗细与底层环的粗细相同。这里最重要的一句是在角末加了“步进”。steps的值乘以数越小，角度增加的越少，steps的值越大，进步的幅度越大。ctx.strokeStyle="#47cab0";ctx.lineWidth=20;ctx.save();ctx.beginPath();ctx.arc(canvasX,canvasY,90,-Math.PI/2,-Math.PI/2+步骤*进度，假）；ctx.stroke();ctx.closePath();ctx.restore();(5)绘制字体并指定位置圆环的进度百分比文本显示需要使用canvas的文本绘制，这里需要注意数字是1位到3位的跨度，%也是添加，所以位置需要改变。当数字达到100时，文字的宽度会变大，所以要改变绘图的起点。ctx.fillStyle="#000000";//可以改ctx.font="bold26pxArial";//可以改变ctx.save();//CanvasX-30,canvasY+10的加减值可以改变if(steps.toFixed(0).length==3){ctx.fillText(steps.toFixed(0)+'%',canvasX-30,canvasY+10);}else{ctx.fillText(steps.toFixed(0)+'%',canvasX-20,canvasY+10);}ctx.restore();这里写一个静态的进度会出现，但是我们还是要让它动起来，大家可能会想到定时器。但是我们使用了另一种方式来编写循环动画。(6)进度动画显示的刷新频率通常为50~60hz，1000ms/60≈16.6ms，相当于每秒重绘60次，大部分浏览器不会超过显示的重绘频率。在上一篇文章中，我们提到了setTimeout()和setInterval()这两个循环并没有那么精确和智能。即使用setTimeout()以自调的方式模拟循环定时器，也不能保证处理线程能按照理想的OK。window.requestAnimationFrame()window.requestAnimationFrame()告诉浏览器——你要执行一个动画，要求浏览器在下次重绘前调用指定的回调函数来更新动画。该方法需要传入一个回调函数作为参数，回调函数会在下次浏览器重绘前执行。回调函数的执行次数通常为每秒60次，但在大多数遵循W3C推荐的浏览器中，回调函数的执行次数通常与浏览器屏幕刷新次数相匹配。为了提高性能和电池寿命，在大多数浏览器中，当requestAnimationFrame()在后台选项卡或隐藏的
