HTML5 Canvas 기초 (5)

캔버스라이브강좌

  • 인터렉션
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
<!DOCTYPE html>
<html>
  <head>
    <title>Canvas</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      canvas {
        background: #eee;
      }
    </style>
  </head>

  <body>
    <h1>Interaction</h1>
    <canvas class="canvas" width="600" height="400"></canvas>

    <script>
      const canvas = document.querySelector(".canvas");
      const context = canvas.getContext("2d");

      context.fillRect(200, 200, 100, 100);

      function clickHandler(e) {
        // console.log(e.clientX, e.clientY);
        // console.log(e.layerX, e.layerY);
        const x = e.layerX;
        const y = e.layerY;

        if (x > 200 && x < 200 + 100 && y > 200 && y < 200 + 100) {
          console.log("x ok");
        }
      }

      canvas.addEventListener("click", clickHandler);
    </script>
  </body>
</html>