Нажмите Событие в Canvas / SVG

Question

Я играю с HTML5 Canvas для разработки интерактивного личного сайта. Я создал холст 400х200, а затем наложил на него фоновое изображение. Теперь поверх BG Image я разместил еще 5 изображений. Теперь мое требование заключается в том, чтобы в зависимости от того, какое изображение было нажано, я хочу, чтобы 1, отображал текст за пределами холста, а 2 - серым, оставшиеся 4 изображения (больше в анимированном виде).

Я могу выполнить до отображения изображений, я не могу создать действие события клика. Это потому, что весь холст рассматривается как одно изображение? если так, то с помощью #usemap будет работать? Я попытался добавить событие addEventListener, но ничего не происходит.

Есть ли в SVG более простой способ сделать то же самое?

Спасибо за любые указатели.

Answer 1

Вы можете добавить обработчик кликов на холст, используя jquery, как это

$("#canvasId").click(function(e){
    alert("canvas clicked";
}

Теперь вам нужно будет определить изображение, на котором произошло событие клика. Если вы знаете верхний левый и нижний правый угол изображения, вы можете определить изображение, на котором вы щелкнули. Чтобы определить местоположение мыши, вы можете использовать что-то вроде следующего:

var x = Math.floor((e.pageX-$("#canvasId").offset().left) / 20);
var y = Math.floor((e.pageY-$("#canvasId").offset().top) / 20);