Как добавить простой обработчик событий onClick в элемент canvas?

когда вы рисуете на canvas элемент, вы просто чертеж растровое изображение, в мгновенном режиме.

The элементов (фигуры, линии, изображения), которые рисуются, не имеют представления, кроме пикселей, которые они используют, и их цвета.

, чтобы получить клик событие canvasэлемент (форма), вам нужно захватить события щелчка на canvas HTML-элемент и использовать математику, чтобы определить, какие элемент был нажат, если вы сохраняете ширину/высоту элементов и смещение x/y.

добавить click события canvas элемент, использовать...

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

чтобы определить, какие элемент была нажата...

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.

этот код придает click событие canvas элемент, а затем толкает одну форму (так называемый element в моем коде) к elements массив. Вы можете добавить столько, сколько вы хотите здесь.

цель создания массива объектов заключается в том, чтобы мы могли запросить их свойства позже. После того, как все элементы были помещены в массив, мы выполняем цикл и визуализируем каждый из них на основе их свойств.

когда click событие запускается, код проходит через элементы и определяет, был ли щелчок по любому из элементов в elements массив. Если это так, он запускает alert(), который может быть легко изменен, чтобы сделать что-то такое как удалить элемент массива, в этом случае вам понадобится отдельная оказать функция для обновления canvas.

для полноты картины, почему ваши попытки не сработали...

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

это присвоение возвращаемого значения alert() до onClick собственность elem. Он сразу же вызывает alert().

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

в JavaScript ' и " семантически идентичны, лексер, вероятно, использует ['"] для двойные кавычки.

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

вы присваиваете строку onClick собственность elem.

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

JavaScript чувствителен к регистру. Элемент onclick свойство-это архаичный метод присоединения обработчиков событий. Он позволяет прикрепить только одно событие со свойством, и событие может быть потеряно при сериализации HTML.

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

опять ' === ".