캔버스 요소에 이벤트 핸들러를 연결하고 모양에 대한 클릭을 감지하는 방법은 무엇입니까?

캔버스 요소에 이벤트 핸들러 연결

캔버스 요소에 그릴 때 렌더링된 모양에는 픽셀 이상의 고유한 표현이 부족합니다. 즉, 클릭 이벤트를 개별 도형에 직접 연결할 수 없습니다.

해결책:

캔버스 요소에 클릭 핸들러를 추가하려면:

canvas.addEventListener('click', function() { /* Event handler code */ }, false);

캔버스 내의 어떤 요소를 클릭했는지 확인하려면:

var canvas = document.getElementById('myCanvas');

// Get canvas offset and context
var canvasLeft = canvas.offsetLeft + canvas.clientLeft;
var canvasTop = canvas.offsetTop + canvas.clientTop;
var context = canvas.getContext('2d');

// Array to store element data
var elements = [];

// Add 'click' event listener to canvas
canvas.addEventListener('click', function(event) {
  // Calculate click coordinates relative to canvas
  var x = event.pageX - canvasLeft;
  var y = event.pageY - canvasTop;

  // Check for collision detection against elements
  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');
      // TODO: Additional actions (e.g., remove element, update canvas)
    }
  });

}, false);

실패한 시도:

• elem.onClick = Alert("hello world");: onClick 속성에 Alert()의 반환 값을 할당하여 즉시 경고를 표시합니다.
• elem.onClick = "alert('hello world!')"; : onClick 속성에 문자열을 할당하여 이벤트 처리가 발생하지 않습니다.
• elem.onClick = function() { ... }: 이벤트 처리에 구식 방법을 사용합니다. , 대소문자를 구분합니다(onclick 및 onClick).

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