<canvas id="canvas" width="150" height="150"><p>抱歉，您的浏览器不支持canvas</p>
</canvas>

toCanvas('canvas','red',30);/***  生成环形进度条*/function toCanvas(id, color, progress) {//canvas进度条var canvas = document.getElementById(id),ctx = canvas.getContext("2d"),percent = progress, //最终百分比circleX = canvas.width / 2, //中心x坐标circleY = canvas.height / 2, //中心y坐标radius = 60, //圆环半径cradius = 75, // canvas半径lineWidth = 6, //圆形线条的宽度fontSize = 20; //字体大小//两端圆点function smallcircle1(cx, cy, r) {ctx.beginPath();//ctx.moveTo(cx + r, cy);ctx.lineWidth = 1;ctx.fillStyle = '#06a8f3';ctx.arc(cx, cy, r, 0, Math.PI * 2);ctx.fill();}function smallcircle2(cx, cy, r) {ctx.beginPath();//ctx.moveTo(cx + r, cy);ctx.lineWidth = 1;ctx.fillStyle = '#fff';ctx.arc(cx, cy, r, 0, Math.PI * 2);ctx.fill();}//画圆function circle(cx, cy, r) {ctx.beginPath();//ctx.moveTo(cx + r, cy);ctx.lineWidth = lineWidth;ctx.strokeStyle = '#eee';ctx.arc(cx, cy, r, Math.PI * 2 / 3, Math.PI * 1 / 3);ctx.stroke();}//画弧线function sector(cx, cy, r, startAngle, endAngle, anti) {ctx.beginPath();//ctx.moveTo(cx, cy + r); // 从圆形底部开始画ctx.lineWidth = lineWidth;// 渐变色 - 可自定义//                      var linGrad = ctx.createLinearGradient(//                          circleX-radius-lineWidth, circleY, circleX+radius+lineWidth, circleY//                      );//                      linGrad.addColorStop(0.0, '#06a8f3');//                      //linGrad.addColorStop(0.5, '#9bc4eb');//                      linGrad.addColorStop(1.0, '#00f8bb');//                      ctx.strokeStyle = linGrad;// 进度条颜色ctx.strokeStyle = color;//圆弧两端的样式ctx.lineCap = 'round';//圆弧ctx.arc(cx, cy, r,(Math.PI * 2 / 3),(Math.PI * 2 / 3) + endAngle / 100 * (Math.PI * 5 / 3),false);ctx.stroke();}//刷新function loading() {if (process >= percent) {clearInterval(circleLoading);}//清除canvas内容ctx.clearRect(0, 0, circleX * 2, circleY * 2);//中间的字ctx.font = fontSize + 'px April';ctx.textAlign = 'center';ctx.textBaseline = 'middle';ctx.fillStyle = '#999';ctx.fillText(parseFloat(process).toFixed(0) + '%', circleX, circleY);//圆形circle(circleX, circleY, radius);//圆弧sector(circleX, circleY, radius, Math.PI * 2 / 3, process);//两端圆点smallcircle1(cradius + Math.cos(2 * Math.PI / 360 * 120) * radius, cradius + Math.sin(2 * Math.PI / 360 * 120) *radius, 0);smallcircle2(cradius + Math.cos(2 * Math.PI / 360 * (120 + process * 3)) * radius, cradius + Math.sin(2 * Math.PI /360 * (120 + process * 3)) * radius, 2);//控制结束时动画的速度if (process / percent > 0.90) {process += 0.30;} else if (process / percent > 0.80) {process += 0.55;} else if (process / percent > 0.70) {process += 0.75;} else {process += 1.0;}}var process = 0.0; //进度var circleLoading = window.setInterval(function() {loading();}, 20);}