代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .container {
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      canvas {
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <canvas id="canvas" width="1600" height="900"></canvas>
    </div>
    <script>
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");

      const x = canvas.width / 2; // 圆心x坐标
      const y = canvas.height / 2; // 圆心y坐标
      const r = y * 0.9; // 半径
      // 外圆填充样式
      const gradient1 = ctx.createRadialGradient(x, y, 0, x, y, r);
      gradient1.addColorStop(0, "rgba(0,155,225,0.05)");
      gradient1.addColorStop(1, "rgba(0,155,225,0.15)");
      // 扇形填充样式
      const gradient2 = ctx.createRadialGradient(x, y, 0, x, y, r);
      gradient2.addColorStop(0, "rgba(0,155,225,0.05)");
      gradient2.addColorStop(1, "rgba(0,155,225,0.2)");
      
      let ag = 0; // 扇形起始角度
      const speed = 180; // 扇形旋转速度 单位：角度/秒
      // 执行动画函数
      animate();

      /**
       * 动画函数
       * */
      function animate() {
        ag += speed / 60;
        const addAngle = (ag % 360) * ((2 * Math.PI) / 360);
        draw(addAngle);
        window.requestAnimationFrame(animate);
      }

      /**
       * 画图
       * @param {number}addAngle 递增的角度
       * */
      function draw(addAngle = 0) {
        // 清除
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 外圆
        ctx.beginPath();
        ctx.fillStyle = gradient1;
        ctx.strokeStyle = "rgba(0,155,225,0.8)";
        ctx.strokeWidth = 2;
        ctx.arc(x, y, r, 0, 2 * Math.PI);
        ctx.fill();
        ctx.stroke();

        // 内圆
        ctx.strokeStyle = "rgba(0,155,225,0.35)";
        for(let i = 1; i <= 5; i++){
          ctx.beginPath();
          ctx.arc(x, y, r*(1 - i*0.2), 0, 2 * Math.PI);
          ctx.stroke();
        }

        // 线
        let n = 8;
        const a = 2*Math.PI / n;
        for(let i = 0; i < n; i++){
          const angle = a*i;
          const py = y - r*Math.sin(angle);
          const px = x + r*Math.cos(angle);
          ctx.beginPath();
          ctx.moveTo(x, y);
          ctx.lineTo(px , py);
          console.log(px, py);
          ctx.stroke();
        }

        // 扇形
        ctx.beginPath();
        ctx.moveTo(x, y);
        ctx.arc(x, y, r, 0 + addAngle,(Math.PI*2 - Math.PI / 9 + addAngle), true);
        ctx.strokeWidth = 4;
        ctx.fillStyle = gradient2;
        ctx.fill();
        ctx.stroke();
      }
    </script>
  </body>
</html>
效果图：

![8(R2GN5L0WU2H5_70E472]7.png](p1-juejin.byteimg.com/tos-cn-i-k3…)
Canvas雷达扫描效果

代码：

效果图：
