canvas---3圆画一个钟表

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      body {
        background: #000000;
      }
      #c1 {
        background: #ffffff;
      }
    </style>
  </head>
  <body>
    <canvas id="c1" width="400" height="400"></canvas>
  </body>
  <script>
    var oC = document.getElementById("c1");
    var cvsCtx = oC.getContext("2d");
    var sAngle = 0;
    var eAngle = 2 * Math.PI;
    function toDraw() {
      var x = 200;
      var y = 200;
      var r = 150;

      var date = new Date();
      var oHour = date.getHours();

      var oMin = date.getMinutes();
      var oSen = date.getSeconds();
      var oHourValue =
        (((360 * oHour) / 12 - 90 + (oMin / 60) * 30) * Math.PI) / 180;

      var oMinValue = (((360 * oMin) / 60 - 90) * Math.PI) / 180;
      var oSencond = (((360 * oSen) / 60 - 90) * Math.PI) / 180;

      var angle = 6;
      var num = 0;
      cvsCtx.clearRect(0, 0, 400, 400);
      cvsCtx.beginPath();

      for (let i = 0; i <= 60; i++) {
        cvsCtx.moveTo(x, y);
        cvsCtx.arc(
          x,
          y,
          r,
          (6 * i * Math.PI) / 180,
          (6 * (i + 1) * Math.PI) / 180,
          false
        );
        cvsCtx.stroke();
      }
      cvsCtx.closePath();

      cvsCtx.beginPath();
      cvsCtx.save();
      cvsCtx.arc(x, y, r - 15, 0, 2 * Math.PI);
      cvsCtx.fillStyle = "#fff";
      cvsCtx.strokeStyle = "#fff";
      cvsCtx.fill();

      cvsCtx.closePath();
      cvsCtx.stroke();
      cvsCtx.restore();

      cvsCtx.beginPath();
      cvsCtx.save();
      cvsCtx.lineWidth = 4;
      for (var i = 0; i < 12; i++) {
        cvsCtx.moveTo(x, y);

        cvsCtx.arc(
          x,
          y,
          r,
          (30 * i * Math.PI) / 180,
          (30 * (i + 1) * Math.PI) / 180,
          false
        );
        cvsCtx.stroke();
      }
      cvsCtx.restore();
      cvsCtx.beginPath();
      cvsCtx.save();
      cvsCtx.arc(x, y, r - 25, 0, 2 * Math.PI);
      cvsCtx.fillStyle = "#fff";
      cvsCtx.strokeStyle = "#fff";
      cvsCtx.fill();

      cvsCtx.closePath();
      cvsCtx.stroke();
      cvsCtx.restore();

      cvsCtx.beginPath();
      cvsCtx.moveTo(x, y);
      cvsCtx.lineWidth = 5;
      cvsCtx.arc(x, y, r - 100, oHourValue, oHourValue);
      cvsCtx.stroke();
      cvsCtx.restore();

      cvsCtx.beginPath();
      cvsCtx.moveTo(x, y);
      cvsCtx.arc(x, y, r - 80, oMinValue, oMinValue);
      cvsCtx.lineWidth = 3;
      cvsCtx.stroke();
      cvsCtx.closePath();

      cvsCtx.beginPath();
      cvsCtx.moveTo(x, y);
      cvsCtx.lineWidth = 1;
      cvsCtx.arc(x, y, r - 20, oSencond, oSencond);

      cvsCtx.stroke();
      cvsCtx.closePath();

      cvsCtx.closePath();
    }

    toDraw();
    setInterval(toDraw, 1000);
  </script>
</html>
canvas---3圆 画一个钟表

猜你喜欢

canvas---3圆画一个钟表
