1 <!DOCTYPE html> 2 <html > 3 <head> 4 <meta http-equiv="content-type" content="text/html" charset="utf-8"> 5 <meta name="author" content="xuyunfei"> 6 <meta name="description" content=""> 7 <meta name="keywords" content="test,html"> 8 <title>环形进度条</title> 9 </head> 10 <body> 11 </br></br></br></br> 12 13 <div style="300px; height:300px; margin:20px auto"> 14 <canvas id="canvas" width="300" height="300"> 15 <p>抱歉，您的浏览器不支持canvas</p> 16 </canvas> 17 </div> 18 19 <script type="text/javascript"> 20 function toCanvas(id ,progress){ 21 // canvas进度条 22 var canvas = document.getElementById(id), 23 ctx = canvas.getContext("2d"), 24 percent = progress, //最终百分比 25 circleX = canvas.width / 2, //中心x坐标 26 circleY = canvas.height / 2, //中心y坐标 27 radius = 100, //圆环半径 28 lineWidth = 5, //圆形线条的宽度 29 fontSize = 20; //字体大小 30 //两端圆点 31 // function smallcircle1(cx, cy, r) { 32 // ctx.beginPath(); 33 // //ctx.moveTo(cx + r, cy); 34 // ctx.lineWidth = 1; 35 // ctx.fillStyle = '#06a8f3'; 36 // ctx.arc(cx, cy, r,0,Math.PI*2); 37 // ctx.fill(); 38 // } 39 // function smallcircle2(cx, cy, r) { 40 // ctx.beginPath(); 41 // //ctx.moveTo(cx + r, cy); 42 // ctx.lineWidth = 1; 43 // ctx.fillStyle = '#00f8bb'; 44 // ctx.arc(cx, cy, r,0,Math.PI*2); 45 // ctx.fill(); 46 // } 47 48 //画圆 49 function circle(cx, cy, r) { 50 ctx.beginPath(); 51 //ctx.moveTo(cx + r, cy); 52 ctx.lineWidth = lineWidth; 53 ctx.strokeStyle = '#eee'; 54 ctx.arc(cx, cy, r, 0, (Math.PI*2),true); 55 ctx.stroke(); 56 } 57 58 //画弧线 59 function sector(cx, cy, r, startAngle, endAngle, anti) { 60 ctx.beginPath(); 61 //ctx.moveTo(cx, cy + r); // 从圆形底部开始画 62 ctx.lineWidth = lineWidth; 63 64 // 渐变色 - 可自定义 65 // var linGrad = ctx.createLinearGradient( 66 // circleX-radius-lineWidth, circleY, circleX+radius+lineWidth, circleY 67 // ); 68 // linGrad.addColorStop(0.0, '#06a8f3'); 69 //linGrad.addColorStop(0.5, '#9bc4eb'); 70 // linGrad.addColorStop(1.0, '#00f8bb'); 71 // ctx.strokeStyle = linGrad; 72 ctx.strokeStyle = 'red'; 73 74 //圆弧两端的样式 75 ctx.lineCap = 'round'; 76 77 //圆弧 78 // ctx.arc( 79 // cx, cy, r, 80 // -1.5, 81 // -1.5 + endAngle/100 * (Math.PI*5/3), 82 // false 83 // ); 84 ctx.arc( 85 cx, cy, r, 86 (Math.PI*-1/2), 87 (Math.PI*-1/2) + endAngle/100 * (Math.PI*2), 88 false 89 ); 90 ctx.stroke(); 91 } 92 93 //刷新 94 function loading() { 95 if (process >= percent) { 96 // clearInterval(circleLoading); 97 process = 0.0; 98 } 99 100 //清除canvas内容 101 ctx.clearRect(0, 0, circleX * 2, circleY * 2); 102 103 //中间的字 104 ctx.font = fontSize + 'px April'; 105 ctx.textAlign = 'center'; 106 ctx.textBaseline = 'middle'; 107 ctx.fillStyle = '#999'; 108 ctx.fillText(parseFloat(process).toFixed(0) + '%', circleX, circleY); 109 110 //圆形 111 circle(circleX, circleY, radius); 112 113 //圆弧 114 sector(circleX, circleY, radius, (Math.PI*-1/2), process); 115 //两端圆点 116 // smallcircle1(150+Math.cos(2*Math.PI/360*120)*100, 150+Math.sin(2*Math.PI/360*120)*100, 5); 117 // smallcircle2(150+Math.cos(2*Math.PI/360*(120+process*3))*100, 150+Math.sin(2*Math.PI/360*(120+process*3))*100, 5); 118 //控制结束时动画的速度 119 // if (process / percent > 0.90) { 120 // process += 0.30; 121 // } else if (process / percent > 0.80) { 122 // process += 0.55; 123 // } else if (process / percent > 0.70) { 124 // process += 0.75; 125 // } else { 126 process += 1.0; 127 // } 128 } 129 130 var process = 0.0; //进度 131 var circleLoading = window.setInterval(function () { 132 loading(); 133 }, 1000); 134 135 } 136 137 //第二部分，调用封装好的代码： 138 toCanvas('canvas',100); 139 140 </script> 141 </body> 142 </html>