前提：项目中有时候会用到进度条，也可以用css3，但是对于性能不好或者网络不好的设备，卡顿的现象非常明显，避免尴尬的情况不流畅，所以记录一下使用canvas实现的方法。效果图：在DOM中，先定义canvas画板元素：你的浏览器不支持canvas!
对于不支持canvas的浏览器，会显示：yourbrowsernotsupportcanvas！接下来是js写法：定义canvas.js并引入varcanvas=document.getElementById('canvas'),//获取canvas元素context=canvas.getContext('2d'),//获取绘图环境，指定为2dcenterX=canvas.width/2,//Canvas中心点X轴坐标centerY=canvas.height/2,//Canvas中心点y轴坐标rad=Math.PI*2/100,//除以360度数分成100份，则每份为rad度数speed=0.1；//加载速度取决于它//绘制蓝色外圈functionblueCircle(n){context.save();context.beginPath();context.strokeStyle="#49f";context.lineWidth=12;context.arc(centerX,centerY,100,-Math.PI/2,-Math.PI/2+n*rad,false);context.stroke();context.restore();}//绘制白色外圈functionwhiteCircle(){context.save();语境。开始路径（）；context.strokeStyle="#A5DEF1";context.lineWidth=12;context.arc(centerX,centerY,100,0,Math.PI*2、假）；context.stroke();context.closePath();context.restore();}//百分比文本绘制函数text(n){context.save();context.fillStyle="#F47C7C";context.font="40px宋体";context.textAlign="居中";context.textBaseline="中间";context.fillText(n.toFixed(0)+"%",centerX,centerY);context.restore();}//动画循环(functiondrawFrame(){window.requestAnimationFrame(drawFrame,canvas);context.clearRect(0,0,canvas.width,canvas.height);whiteCircle();text(speed);blueCircle(speed);if(speed>100)speed=0;speed+=0.1;}());window.requestAnimationFrame(drawFrame,canvas);每一行代码的注释都非常清楚，如果还不明白，可以去canvasBasic，应该没问题
