Коснитесь области на холсте HTML5, используя собственный код javascript

Question

У меня есть один холст с фиксированной шириной и высотой, на этом холсте я нарисовал фоновое изображение, используя метод drawImage(). В фоновом изображении есть некоторые объекты, такие как муравьи (статические), когда пользователь прикасается к муравьям, тогда эта конкретная область должна очищаться (или изображение муравья должно исчезнуть) или должно быть через одно поле оповещения, как вы нашли муравей. Я искал поиск конкретной области касания, но я нашел только координаты x и y, используя событие touchstart. Я не хочу сравнивать с координатами x и y с позицией муравья в изображении. Я знаю положение муравьев на изображении. это код, который я получил при поиске

$('#id').on('touchstart', function(){ 
    alert("Touched");  
}); 

Но я не рисовать изображения через HTML IMG тега. Любая помощь оценила бы много. В событии touchstart есть некоторые свойства radiousX и radiousY, чтобы найти область, но я не получил никаких примеров по этим свойствам.

Вот одна проблема: кто-нибудь через решение этой проблемы ??? Например, есть один образ города, в котором мне нужно прикоснуться к некоторым зданиям после прикосновения к определенному зданию, можем ли мы получить оповещение, как вы находите свой дом ???

Answer 1

Сравнение координат x и y касания с координатами муравья - это правильный путь. Да, очень трудно прикоснуться к точному месту, но вам не обязательно. Вы можете проверить, находятся ли координаты касания в определенном диапазоне, скажем, на расстоянии не более 10 пикселей от координаты муравья.

// touchX and touchY are the touch coordinates 
// antX and antY are the ant's coordinates 

// Is touchX between (antX - 10) and (antX + 10)? 
if (touchX >= antX - 10 && touchX <= antX + 10) { 

    // Is touchY between (antY - 10) and (antY + 10)? 
    if (touchY >= antY - 10 && touchY <= antY + 10) { 
     // The user touched the ant 
    } 
}