Я опытный программист на Java, но впервые примерно за десять лет смотрю на некоторые вещи, связанные с JavaScript / HTML5. Я совершенно не понимаю, что должно быть самым простым.
В качестве примера я просто хотел что-то нарисовать и добавить к нему обработчик событий. Я уверен, что делаю что-то глупое, но я искал повсюду, и ничего из предложенного (например, ответ на этот вопрос: добавить свойство onclick для ввода с помощью JavaScript ) не работает. Я использую Firefox 10.0.1. Мой код следует. Вы увидите несколько закомментированных строк, и в конце каждой будет описание того, что (или чего не происходит) происходит.
Какой здесь правильный синтаксис? Я схожу с ума!
<html>
<body>
<canvas id="myCanvas" width="300" height="150"/>
<script language="JavaScript">
var elem = document.getElementById('myCanvas');
// elem.onClick = alert("hello world"); - displays alert without clicking
// elem.onClick = alert('hello world'); - displays alert without clicking
// elem.onClick = "alert('hello world!')"; - does nothing, even with clicking
// elem.onClick = function() { alert('hello world!'); }; - does nothing
// elem.onClick = function() { alert("hello world!"); }; - does nothing
var context = elem.getContext('2d');
context.fillStyle = '#05EFFF';
context.fillRect(0, 0, 150, 100);
</script>
</body>
onclick
вместоonClick
alert()
напрямую<script>
, а не определяете функцию, которая будет вызыватьalert()
. Остальные ничего не делают из-за заглавных буквonclick
.Ответы:
Когда вы рисуете
canvas
элемент, вы просто рисуете растровое изображение в немедленном режиме .Эти элементы (формы, линия, изображения) , которые нарисованы не имеют никакого представления , кроме пикселей , которые они используют , и их цвет.
Следовательно, чтобы получить событие щелчка на
canvas
элементе (фигуре), вам необходимо захватить события щелчка наcanvas
элементе HTML и использовать некоторые математические вычисления, чтобы определить, какой элемент был нажат, при условии, что вы сохраняете ширину / высоту элементов и смещение x / y. ,Чтобы добавить
click
событие к вашемуcanvas
элементу, используйте ...Чтобы определить, какой элемент был нажат ...
jsFiddle .
Этот код прикрепляет
click
событие кcanvas
элементу, а затем подталкивает одну фигуру (называемуюelement
в моем коде) вelements
массив. Вы можете добавить сюда сколько угодно.Цель создания массива объектов - чтобы мы могли позже запросить их свойства. После того, как все элементы были помещены в массив, мы перебираем и визуализируем каждый из них на основе их свойств.
Когда
click
событие запускается, код перебирает элементы и определяет, был ли щелчок по любому из элементов вelements
массиве. Если это так, он запускает объектalert()
, который можно легко изменить, чтобы сделать что-то, например удалить элемент массива, и в этом случае вам понадобится отдельная функция визуализации для обновления файлаcanvas
.Для полноты, почему ваши попытки не сработали ...
Это присвоение возвращаемого значения
alert()
кonClick
свойствуelem
. Он немедленно вызываетalert()
.В JavaScript символы
'
и"
семантически идентичны, лексер, вероятно, использует их['"]
для кавычек.Вы назначаете строку
onClick
свойствуelem
.JavaScript чувствителен к регистру.
onclick
Свойство является архаичным способом прикрепления обработчиков событий. Он позволяет прикрепить к свойству только одно событие, и событие может быть потеряно при сериализации HTML.Опять же ,
' === "
.источник
Наверное, очень поздно с ответом, но я просто прочитал это во время подготовки к
70-480
экзамену и обнаружил, что это сработало -Обратите внимание на событие как
onclick
вместоonClick
.Пример JS Bin .
источник
Я рекомендую следующую статью: Обнаружение области совпадения для холста HTML5 и как прослушивать события щелчка на фигурах холста, которая проходит через различные ситуации.
Однако он не распространяется на
addHitRegion
API, который должен быть наилучшим (использование математических функций и / или сравнений весьма подвержено ошибкам). Этот подход подробно описан на сайте developer.mozilla.источник
addHitRegion
] устарел. Хотя он все еще может работать в некоторых браузерах, его использование не рекомендуется, так как оно может быть удалено в любой момент. Старайтесь не использовать его». - по включенной вами ссылке dev.moz, чтобы сохранить щелчок для других.В качестве альтернативы ответу Алексея:
Вы можете использовать рисунок SVG вместо рисунка холста. Там вы можете добавлять события прямо к нарисованным объектам DOM.
см. например:
Делаем объект изображения svg интерактивным с помощью onclick, избегая абсолютного позиционирования
источник
Вы также можете разместить элементы DOM, например,
div
поверх холста, которые будут представлять ваши элементы холста и располагаться таким же образом.Теперь вы можете прикрепить к этим блокам прослушиватели событий и выполнить необходимые действия.
источник
В качестве еще одной дешевой альтернативы на несколько статичном холсте использование накладываемого элемента img с определением карты использования выполняется быстро и грязно. Особенно хорошо работает с элементами холста на основе многоугольников, такими как круговая диаграмма.
источник
Ответ Alex довольно удобен, но при использовании поворота контекста может быть сложно отследить координаты x, y, поэтому я сделал демонстрацию, показывающую, как это отслеживать.
В основном я использую эту функцию и задаю ей угол и расстояние, пройденное этим ангелом до рисования объекта.
источник