canvas绘制环形进度条

  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="width: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>
canvas绘制环形进度条

猜你喜欢
