JavaScript의 캔버스 요소에 onClick 이벤트 핸들러를 추가하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

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

Barbara Streisand

풀어 주다： 2024-11-14 12:30:02

원래의

896명이 탐색했습니다.

How to Add an onClick Event Handler to a Canvas Element in JavaScript?

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);
});

로그인 후 복사

설명:

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

시도 실패 이유: