canvas弧形进度条

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    #circle{
     
      outline: 1px solid black;
      /* 使用大尺寸再缩小,可以缓解屏幕渲染精度低,边缘毛糙的现象 */
      transform: scale(0.2);
    }
  </style>
</head>

<body>
  <canvas id="circle" height="1000px" width="1000px">
  </canvas>
</body>
<script src="./zxk.js">
</script>

</html>
/**
 * @description 画圆弧进度条
 * @date 2019-11-20
 * @param {Number} percentage 比例,0-1之间
 */
function circle(percentage) {
     
  const canvas = document.querySelector('#circle');;
  const ctx = canvas.getContext('2d');

  /* 画笔圆公共的配置 */
  const commmonObj = {
     
    /* 2d上下文 */
    ctx: ctx,
    /*圆心*/
    x: 500,
    y: 500,
    /*半径*/
    radius: 400,
    /*环的宽度*/
    lineWidth: 50
  };
  /* 点亮的区域 */
  const activeObj = {
     
    ...commmonObj,
    /* 开始画的角度,从120°的地方起笔 */
    startAngle: (Math.PI * 2 * 120) / 360,
    /* 结束的角度,根据传入的比例计算结束的角度,整个进度条的角度是(360-60)° */
    endAngle: (Math.PI * 2 * (120 + (360 - 60) * percentage)) / 360,
    /* 颜色 */
    color: '#28BF68'
  };
  /* 灰色区域 */
  const backObj = {
     
    ...commmonObj,
    /* 灰色开始的角度就是点亮区域结束的角度 */
    startAngle: activeObj.endAngle,
    /* 结束的角度,从120°的地方开始,到60°的地方结束 */
    endAngle: (Math.PI * 2 * 60) / 360,
    /* 颜色 */
    color: '#ecf9ef'
  };
  drawCircle(backObj);
  drawCircle(activeObj);
}
/**
 * @description 画曲线
 * @date 2019-11-20
 * @param {Object} circleObj 画线配置
 */
function drawCircle(circleObj) {
     
  const ctx = circleObj.ctx;
  ctx.beginPath();
  ctx.arc(
    circleObj.x,
    circleObj.y,
    circleObj.radius,
    circleObj.startAngle,
    circleObj.endAngle,
    false
  );
  //设定曲线粗细度
  ctx.lineWidth = circleObj.lineWidth;
  //给曲线着色
  ctx.strokeStyle = circleObj.color;
  //连接处样式
  ctx.lineCap = 'round';
  //给环着色
  ctx.stroke();
  ctx.closePath();
}


let n = 1;
const tiktok = setInterval(() => {
     
  n++
  if(n/500>=1) {
     
    circle(1);
    clearInterval(tiktok)
  } else {
     
    circle(n / 500);
  }
}, 10);

你可能感兴趣的:(javascript)