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

onClick 이벤트를 캔버스 요소에 연결하는 방법

소개:

캔버스 요소 웹 페이지에서 그래픽을 그리고 조작하는 강력한 방법을 제공합니다. 그러나 캔버스 요소에 이벤트 핸들러를 추가하는 것은 초보자에게 까다로울 수 있습니다. 이 기사에서는 간단한 onClick 이벤트 핸들러를 캔버스 요소에 추가하는 방법을 보여줍니다.

문제:

숙련된 Java 개발자는 onClick 이벤트 핸들러를 캔버스 요소에 추가하는 데 어려움을 겪고 있습니다. JavaScript의 캔버스 요소입니다. onclick 속성 사용, 함수 할당, 속성을 문자열로 설정 등 여러 시도가 실패했습니다.

해결책:

캔버스 요소에 그림을 그릴 때 요소 자체에는 픽셀과 색상 외에는 어떤 표현도 없습니다. 따라서 요소에 대한 클릭을 감지하려면 캔버스 HTML 요소에서 클릭 이벤트를 캡처하고 수학적 계산을 사용하여 어떤 요소가 클릭되었는지 확인해야 합니다.

캔버스 요소에 클릭 이벤트를 추가하려면 다음을 사용하세요. 구문:

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

클릭한 요소를 확인하려면 다음 코드를 사용하세요.

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

// Add event listener for 'click' events.
elem.addEventListener('click', function(event) {
    var x = event.pageX - elemLeft,
        y = event.pageY - elemTop;

    // Collision detection between clicked offset and element.
    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');
        }
    });

}, false);

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

// Render elements.
elements.forEach(function(element) {
    context.fillStyle = element.colour;
    context.fillRect(element.left, element.top, element.width, element.height);
});

설명:

이 코드는 클릭을 연결합니다. 이벤트를 캔버스 요소에 추가하고 요소 배열에 단일 요소를 추가합니다. 코드는 요소를 반복하고, 클릭 좌표를 요소 좌표와 비교하고, 요소에서 클릭이 발생하면 경고합니다.

시도 실패 이유:

• alert()의 반환 값을 onClick 속성에 할당하면 경고() 함수가 즉시 호출됩니다.
• onClick 속성에 문자열 할당이 이벤트 핸들러를 연결하지 않았습니다.
• 구식 사용 onclick 속성은 대소문자를 구분하며 직렬화 중에 손실될 수 있습니다.

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