master

分支 (1)

管理

管理

master

utils
/
canvas图形加载图.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <style type="text/css">
    #mycanvas {
      margin: 0 auto;
      display: block;
      border: 1px solid yellow;
    }
  </style>
</head>

<body>
  <canvas id="mycanvas">当前浏览器不支持canvas组件请升级！</canvas>

  <script type="text/javascript">
    let canvas = document.getElementById('mycanvas');
    function getRandomColor() {
      let rbg = [], color = '';
      for (let i = 0; i < 3; i++) {
        color = Math.floor(Math.random() * 256).toString(16);
        color = color.padStart(2, '0');
        rbg.push(color)
      }
      return '#' + rbg.join('');
    }
    const color = getRandomColor();
    if (canvas.getContext) {
      let ctx = canvas.getContext('2d');
      canvas.width = 300;
      canvas.height = 300;
      const lineWidth = 10;
      const fontSize = 30;
      const startAngle = - Math.PI / 2;
      const endAngle = startAngle + Math.PI * 2;
      const xAngle = Math.PI / 180;
      let tempAngle = startAngle;
      const r = canvas.width / 2;
      const rCenter = r - 4 * lineWidth;
      function render() {
        if (tempAngle === endAngle) {
          return
        } else {
          tempAngle += xAngle;
          tempAngle = tempAngle >= endAngle ? endAngle : tempAngle;
        }
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = color;
        ctx.arc(r, r, rCenter, startAngle, tempAngle, false);
        ctx.stroke();
        ctx.closePath();

        ctx.font = fontSize + 'px Microsoft YaHei';
        // ctx.textAlign = 'center';
        ctx.fillStyle = color;
        ctx.fillText(Math.round((tempAngle - startAngle) / (endAngle - startAngle) * 100) + '%', r, r + fontSize / 2)
        requestAnimationFrame(render);
      }
      render()
    }
  </script>
</body>

</html>