События в элементах холста

Question

Я нарисовал изображение внутри тега canvas.Как я могу добавить события к нему?Я хочу что-то сделать, когда пользователь нажимает на это изображение.

character.addEventListener('click', function() { alert('foo'); }, true);
/* character is a var (image object) within a canvas */

Спасибо.

Answer 1

получить событие щелчка каждого прямоугольника внутри холста?

Более того, я обнаружил, что этот ответ не работает в Mozilla.

Вместо этого используйте clientX вместоoffsetX.

Например, я создал динамическую галерею изображений canvas на github по адресу: https://github.com/michaelBenin/fi-test

Каждый раз, когда окно изменяется, я пересчитываю x, y каждого нарисованного изображения изтам я запускаю функцию столкновений при щелчке по холсту.

По сути, вы получаете значение x, y из события click и проверяете, есть ли что-нибудь на холсте с этими координатами.

Вот еще одна полезная ссылка для регистрации событий нажатия внутри холста: http://eli.thegreenplace.net/2010/02/13/finding-out-the-mouse-click-position-on-a-canvas-with-javascript/

Answer 2

Нет способа добавить обработчики событий к фактическим чертежам на холсте.Вы можете обрабатывать события для всего холста - вот и все.

На этом этапе вы можете либо добавить абстракцию над холстом, и искать там чертежи, основанные на координатах из событий щелчка холста, либо удалитьхолст в целом и пойти, например, SVG.Библиотека Рафаэля (http://raphaeljs.com/) может помочь вам с последним.

Answer 3

см ссылку ссылку, есть образец

http://www.html5canvastutorials.com/cookbook/ch6/1369_06_03/

см. Источник страницы