Mluti-Agent_simulation/WebModule/train-web/public/lock.html

<!DOCTYPE html>
<html lang="zh_cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="clockCanvas" width="400" height="400"></canvas>
  </body>
  <script>
    // 获取 Canvas 元素和 2D 上下文
    const canvas = document.getElementById("clockCanvas");
    const ctx = canvas.getContext("2d");

    // 获取 Canvas 的中心点坐标
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;

    // 绘制时钟的外圆
    function drawClockFace() {
      ctx.beginPath();
      ctx.arc(centerX, centerY, 190, 0, Math.PI * 2);
      ctx.lineWidth = 5;
      ctx.strokeStyle = "#000";
      ctx.stroke();
      ctx.closePath();
    }

    // 绘制时钟的刻度
    function drawClockTicks() {
      for (let i = 0; i < 12; i++) {
        const angle = (Math.PI / 6) * i;
        const x1 = centerX + Math.sin(angle) * 160;
        const y1 = centerY - Math.cos(angle) * 160;
        const x2 = centerX + Math.sin(angle) * 180;
        const y2 = centerY - Math.cos(angle) * 180;

        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.lineWidth = 3;
        ctx.strokeStyle = "#000";
        ctx.stroke();
        ctx.closePath();
      }
    }

    // 绘制时钟的指针
    function drawClockHands() {
      const now = new Date();
      const hours = now.getHours();
      const minutes = now.getMinutes();
      const seconds = now.getSeconds();

      // 绘制时针
      const hourAngle = (Math.PI / 6) * (hours % 12) + (Math.PI / 360) * minutes;
      const hourHandLength = 100;
      const hourX = centerX + Math.sin(hourAngle) * hourHandLength;
      const hourY = centerY - Math.cos(hourAngle) * hourHandLength;

      ctx.beginPath();
      ctx.moveTo(centerX, centerY);
      ctx.lineTo(hourX, hourY);
      ctx.lineWidth = 8;
      ctx.strokeStyle = "#000";
      ctx.stroke();
      ctx.closePath();

      // 绘制分针
      const minuteAngle = (Math.PI / 30) * minutes + (Math.PI / 1800) * seconds;
      const minuteHandLength = 140;
      const minuteX = centerX + Math.sin(minuteAngle) * minuteHandLength;
      const minuteY = centerY - Math.cos(minuteAngle) * minuteHandLength;

      ctx.beginPath();
      ctx.moveTo(centerX, centerY);
      ctx.lineTo(minuteX, minuteY);
      ctx.lineWidth = 5;
      ctx.strokeStyle = "#000";
      ctx.stroke();
      ctx.closePath();

      // 绘制秒针
      const secondAngle = (Math.PI / 30) * seconds;
      const secondHandLength = 160;
      const secondX = centerX + Math.sin(secondAngle) * secondHandLength;
      const secondY = centerY - Math.cos(secondAngle) * secondHandLength;

      ctx.beginPath();
      ctx.moveTo(centerX, centerY);
      ctx.lineTo(secondX, secondY);
      ctx.lineWidth = 2;
      ctx.strokeStyle = "#f00";
      ctx.stroke();
      ctx.closePath();
    }

    // 绘制整个时钟
    function drawClock() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      drawClockFace();
      drawClockTicks();
      drawClockHands();

      requestAnimationFrame(drawClock);
    }

    // 开始绘制时钟
    drawClock();
  </script>
</html>