example/canvas/base/example01.html at main · ruizer/example · 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
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>canvas坐标系</title>
    <style>
      #canvas {
        box-shadow: 4px 4px 12px #888888;
      }
    </style>
  </head>

  <body>
    <canvas id="canvas"></canvas>
    <script src="/example/public/js/favicon.js"></script>
    <script src="/example/public/js/github.js"></script>
    <script src="../libs/base.js"></script>
    <script>
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");

      let W = (canvas.width = 600);
      let H = (canvas.height = 400);

      let mouse = C.getOffset(canvas);

      drawSystem();

      canvas.onmousemove = function () {
        ctx.clearRect(0, 0, W, H);

        let dx = mouse.x - W / 2;
        let dy = mouse.y - H / 2;

        // let angle = (Math.atan(dy / dx) * 180) / Math.PI;
        let angle = (Math.atan2(dy, dx) * 180) / Math.PI;

        drawSystem();
        ctx.beginPath();
        ctx.lineTo(mouse.x, mouse.y);
        ctx.lineTo(W / 2, H / 2);
        ctx.stroke();
        ctx.fillText(angle, mouse.x, mouse.y);
      };

      function drawSystem() {
        ctx.save();
        ctx.lineWidth = 1.5;
        ctx.beginPath();
        ctx.moveTo(0, H / 2);
        ctx.lineTo(W, H / 2);
        ctx.moveTo(W / 2, 0);
        ctx.lineTo(W / 2, H);
        ctx.stroke();
        ctx.restore();
      }
    </script>
  </body>
</html>