HTML5 캔버스 요소에 간단한 onClick 이벤트 핸들러를 어떻게 추가합니까?

캔버스 요소에 그려진 요소에는 표현이 없습니다. 그들의 유일한 표현은 그들이 사용하는 픽셀과 색상입니다. 캔버스 요소에 그리는 것은 즉시 모드에서 비트맵을 그리는 것을 의미합니다. 캔버스 요소(모양)에서 클릭 이벤트를 가져오려면 캔버스 HTML 요소에서 클릭 이벤트를 캡처하고 어떤 요소가 클릭되었는지 확인해야 합니다. 이를 위해서는 요소의 너비와 높이를 저장해야 합니다.

캔버스 요소에 클릭 이벤트를 추가하려면 아래 코드를 사용하세요.

canvas.addEventListener('click', function() { }, false);

예시

어떤 요소가 클릭되었는지 확인하려면 다음 코드 스니펫을 사용하십시오 -

var e = document.getElementById('myCanvas'),
   elemLeft = e.offsetLeft,
   elemTop = e.offsetTop,
   context = e.getContext('2d'),
   elements = [];

// event listener for click event
e.addEventListener('click', function(event) {
   var xVal = event.pageX - elemLeft,
   yVal = event.pageY - elemTop;
   console.log(xVal, yVal);
   elements.forEach(function(ele) {
      if (yVal > ele.top && yVal < ele.top + ele.height && xVal > ele.left && xVal < ele.left + ele.width) {
         alert(‘element clicked');
      }
   });
}, false);
elements.push({
   colour: '#1C2128’,
   width: 250,
   height: 200,
   top: 30,
   left: 20
});
elements.forEach(function(ele) {
   context.fillStyle = element.colour;
   context.fillRect(ele.left, ele.top, ele.width, ele.height);
});