Animation/axis.html at main · MoonSupport/Animation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="application/javascript"></script>
  </head>

  <script>
    window.addEventListener("resize", draw);
    let isInit = false;
    function draw() {
      const w = window.innerWidth * 0.9;
      const h = window.innerHeight * 0.9;

      const body = document.querySelector("body");
      body.style.width = document.body.clientWidth;
      body.style.width = document.body.clientWidth;

      const step = 20;
      const fontSize = 10;

      const canvas = document.querySelector("canvas");
      canvas.width = w;
      canvas.height = h + fontSize;

      const ctx = canvas.getContext("2d");

      if (!isInit) {
        canvas.addEventListener("click", function (event) {
          const rect = canvas.getBoundingClientRect();
          const x = event.clientX - rect.left;
          const y = event.clientY - rect.top;
          ctx.beginPath();
          ctx.arc(x, y, 7, 0, Math.PI * 2);
          ctx.fill();
          const lerf = 5;
          ctx.fillText(
            `(${x / 20},${Math.ceil(h / 20) - y / 20})`,
            x + lerf,
            y - lerf
          );
        });
        isInit = true;
      }

      const drawGrid = function (ctx, w, h, step) {
        ctx.beginPath();
        for (let x = 0; x <= w; x += step) {
          ctx.moveTo(x, 0);
          ctx.lineTo(x, h);
          ctx.font = `${fontSize}px serif`;
          ctx.fillText(x / step, x - fontSize / 3, h + fontSize);
        }
        ctx.strokeStyle = "rgb(255,0,0)";
        ctx.lineWidth = 1;

        ctx.stroke();

        ctx.beginPath();
        for (let y = 0; y <= h; y += step) {
          ctx.moveTo(0, y);
          ctx.lineTo(w, y);
          ctx.font = `${fontSize}px serif`;

          ctx.fillText(Math.ceil(h / step) - y / step, 0, y + fontSize / 3);
        }
        ctx.strokeStyle = "rgb(20,20,20)";
        ctx.lineWidth = 1;
        ctx.stroke();
      };

      drawGrid(ctx, w, h, step);
    }
  </script>

  <body onload="draw();">
    <canvas
      style="
        border: 1px solid #333;
        margin: 0;
        padding: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      "
    >
    </canvas>
    <button onclick="draw()">RESET</button>
  </body>
</html>