캔버스 요소에 클릭 이벤트 핸들러를 추가하는 방법은 무엇입니까?

캔버스 요소용 OnClick 이벤트 핸들러

캔버스 요소로 작업할 때 그려진 객체에 이벤트 핸들러를 할당하는 것이 어려울 수 있습니다. 다른 HTML 요소와 달리 캔버스 요소는 클릭 이벤트를 기본적으로 지원하지 않습니다.

해결책: DOM 이벤트 및 수학

캔버스에 클릭 이벤트 핸들러를 추가하려면 요소의 경우 다음 두 가지 작업을 수행해야 합니다.

1. DOM 이벤트 처리: addEventListener 메서드를 사용하여 캔버스 HTML 요소에서 클릭 이벤트를 캡처합니다.
2. 충돌 감지: 수학적 계산을 사용하여 마우스 클릭 위치와 그려진 요소의 크기를 기반으로 어떤 요소가 클릭되었는지 확인합니다.

코드 샘플

다음 단계를 구현하는 예제 코드는 다음과 같습니다.

// Get the canvas element and its context
var elem = document.getElementById('myCanvas');
var context = elem.getContext('2d');

// Define an array to store element information
var elements = [];

// Add a click event listener to the canvas
elem.addEventListener('click', function(event) {
  // Calculate the mouse click position relative to the canvas
  var x = event.pageX - elem.offsetLeft;
  var y = event.pageY - elem.offsetTop;

  // Loop through the elements and check for collision
  elements.forEach(function(element) {
    if (y > element.top && y < element.top + element.height 
        && x > element.left && x < element.left + element.width) {
      alert('clicked an element');
    }
  });
});

// Add an element to the array
elements.push({
  colour: '#05EFFF',
  width: 150,
  height: 100,
  top: 20,
  left: 15
});

// Render the element
context.fillStyle = element.colour;
context.fillRect(element.left, element.top, element.width, element.height);

시도가 작동하지 않은 이유

• elem.onClick = Alert("안녕하세요 세상"); onClick 속성에 Alert() 반환 값을 할당하여 즉시 경고를 트리거합니다.
• elem.onClick = "alert('hello world!')"; onClick 속성에 문자열을 할당합니다.
• elem.onClick = function() { Alert('hello world!'); }; 오래된 onclick 속성을 사용하며 대소문자를 구분합니다.

위 내용은 캔버스 요소에 클릭 이벤트 핸들러를 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!