example/canvas/base/example02.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
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>箭头随着鼠标移动</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 src="../assets/components/Arrow.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);

      const arrow = new Arrow({
        x: W / 2,
        y: H / 2,
        width: 100,
        height: 60,
      }).render(ctx);

      canvas.onmousemove = function () {
        let dx = mouse.x - arrow.x;
        let dy = mouse.y - arrow.y;
        arrow.rotation = Math.atan2(dy, dx);

        ctx.clearRect(0, 0, W, H);
        arrow.render(ctx);
      };
    </script>
  </body>
</html>