Когда вы рисуете элемент canvas, вы просто рисуете растровое изображение в немедленном режиме .
Элементы (фигуры, линии, изображения), которые нарисованы, не имеют представления, кроме используемых ими пикселей и их цвета.
Поэтому, чтобы получить событие click для canvas элемента (shape), вам нужно захватить события click для элемента 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(), который можно легко изменить, чтобы сделать что-то, например, удалить элемент массива, и в этом случае вам потребуется отдельная функция render для обновления 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
Снова ' === ".