DOM Canvas 도형의 클릭 이벤트 처리

도형의 클릭 이벤트를 처리하기 위해서는,

Path2D객체를 이용해서 Path정보를 따로 저장해 놓고, 이 정보로 클릭 여부를 체크 할 수 있다.

Path2D 객체

context의 패스작업을 따로 보관하는 객체

context에서 제공하는 Path관련 함수들을 사용 할 수 있다.

html

1. <body onload="load(this)">

2.     <canvas  id="draw" onclick="clickCanvas(window.event)" width="300px" height="300px;"></canvas>

3. </body>

javascript

Path2D 객체로 Path작업을 분리시키고, 

따로 보관한 Path2D객체를 context객체의 isPointInPath 객체로 포인트 접근 여부를 확인한다.

1. var ctx = null;

2. var path = null;

3.  

4. function load(target) {

5.     // 실제로 그려지는 위치의 캔버스 생성

6.     var canvas = document.getElementById("draw");

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

8.    

9.     path = new Path2D();

10.     path.fillStyle = "rgb(255, 0, 0)";

11.     path.arc(100, 100, 100, 0, 2*Math.PI, true);

12.     ctx.stroke(path);

13. }

14.  

15. function clickCanvas(event) {

16.     var x = event.pageX;

17.     var y = event.pageY;

18.     if(ctx.isPointInPath(path, x,  y)) {

19.         alert("in circle");

20.     } else {

21.         alert("out circle");

22.     }

23. }