canvas绘制圆环进度条

来源：互联网发布：手机麻将服务端源码编辑：程序博客网时间：2024/04/30 11:59
<!DOCTYPE html>  <html>      <head>          <meta charset="UTF-8">          <title>绘制圆环进度条</title>      </head>      <body>          <div>              <canvas id="myCanvas"></canvas>          </div>          <script type="text/javascript">              function drawRing(w,h,val){                  //先创建一个canvas画布对象，设置宽高，val%百分比                 var c=document.getElementById('myCanvas');                  var ctx=c.getContext('2d');                  ctx.canvas.width=w;                  ctx.canvas.height=h;                  //圆环有两部分组成，底部灰色完整的环，根据百分比变化的环                  //先绘制底部完整的环                  //起始一条路径                  ctx.beginPath();                  //设置当前线条的宽度                  ctx.lineWidth=10;//10px                  //设置笔触的颜色                  ctx.strokeStyle='#CCCCCC';                  //arc()方法创建弧/曲线（用于创建圆或部分圆）arc(圆心x,圆心y,半径,开始角度,结束角度)                  ctx.arc(50,50,40,0,2*Math.PI);                            //绘制已定义的路径                  ctx.stroke();                  //绘制根据百分比变动的环                  ctx.beginPath();                  ctx.lineWidth=10;                  ctx.strokeStyle='#d54540';                  //设置开始处为0点钟方向（-90*Math.PI/180）                  //x为百分比值（0-100）                  ctx.arc(50,50,40,-Math.PI/2,(val*3.6-90)*Math.PI/180); //从-PI/2转到PI/10                 ctx.stroke();                  //绘制中间的文字                  ctx.font='20px Arial';                  ctx.fillStyle='#747474';                  ctx.textBaseline='middle';                  ctx.textAlign='center';                  ctx.fillText(val+'%',50,50);              }              drawRing(100,100,60);          </script>      </body>  </html>
这里写图片描述
阅读全文
0 0