Jak dodać prostą obsługę zdarzenia onClick do elementu canvas?

Gdy rysujesz do elementu canvas, po prostu rysujesz bitmapę w trybie natychmiastowym.

Elementy (kształty, linie, obrazy), które są rysowane, nie mają żadnej reprezentacji poza używanymi pikselami i ich kolorem.

Dlatego, aby uzyskać kliknij Zdarzenie na canvas element (kształt), musisz uchwycić zdarzenia kliknięcia na elemencie HTML canvas i użyć matematyki, aby określić, który element został kliknięty, pod warunkiem, że przechowujesz szerokość/wysokość elementów oraz przesunięcie x / y.

Aby dodać zdarzenie click do elementu canvas, użyj...

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

Aby określić, który element został kliknięty...

var elem = document.getElementById('myCanvas'),
    elemLeft = elem.offsetLeft,
    elemTop = elem.offsetTop,
    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);
});​

JsFiddle .

Ten kod dołącza Zdarzenie click do elementu canvas, a następnie wypycha jeden kształt (zwany element w moim kodzie) do tablicy elements. Możesz tu dodać tyle, ile chcesz.

Celem tworzenia tablicy obiektów jest sprawdzenie ich właściwości później. Po wypchnięciu wszystkich elementów na tablicę, wykonujemy pętlę i renderujemy każdy z nich na podstawie ich właściwości.

Po wywołaniu zdarzenia click, kod przecina elementy i określa, czy kliknięcie nastąpiło nad którymkolwiek z elementów tablicy elements. Jeśli tak, to uruchamia alert(), które można łatwo zmodyfikować, aby zrobić coś takiego, jak usunięcie elementu tablicy, w którym to przypadku potrzebujesz oddzielnej funkcji render , aby zaktualizować canvas.

Dla kompletność, dlaczego twoje próby nie zadziałały...

elem.onClick = alert("hello world"); // displays alert without clicking

Jest to przypisanie wartości zwracanej alert() do właściwości onClick elem. Od razu przywołuje alert().

elem.onClick = alert('hello world');  // displays alert without clicking

W JavaScript, ' i " są semantycznie identyczne, lexer prawdopodobnie używa ['"] do cudzysłowów.

elem.onClick = "alert('hello world!')"; // does nothing, even with clicking

Przypisujesz łańcuch do onClick właściwości elem.

elem.onClick = function() { alert('hello world!'); }; // does nothing

JavaScript rozróżnia wielkość liter. Właściwość onclick jest archaiczną metodą dołączania obsługa zdarzeń. Pozwala na dołączenie tylko jednego zdarzenia z właściwością i zdarzenie może zostać utracone podczas serializacji HTML.

elem.onClick = function() { alert("hello world!"); }; // does nothing

Jeszcze raz, ' === ".