Когда вы рисуете элемент canvas, вы просто рисуете растровое изображение в немедленном режиме.
Нарисованные элементы (фигуры, линии, изображения) не имеют представления, кроме используемых пикселей и их цвета.
Следовательно, чтобы получить событие click на canvas элементе (фигуре), вам необходимо зафиксировать события щелчка на canvas HTML-элементе и использовать математические вычисления, чтобы определить, какой элемент был нажат. при условии, что вы сохраняете ширину / высоту элементов и смещение по x / y.
Чтобы добавить событие click к вашему элементу canvas, используйте ...
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);
});
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
Опять ' === ".
person
alex
schedule
26.03.2012
onclickвместоonClick- person noob schedule 27.03.2012alert()непосредственно в<script>, вместо того, чтобы определять функцию, которая будет вызыватьalert(). Остальные ничего не делают из-за использования заглавных буквonclick. - person LarsH schedule 15.02.2016