HTML5 кликабельный элемент canvas?

Question

Я создаю круг на холсте.Можно ли сделать мой круг кликабельным?

function createCircle(context, x, y, radius, color) {
   context.beginPath();
   context.fillStyle = color;
   context.arc(x, y, radius, 0, Math.PI * 2, true);
   context.closePath();
   context.fill();
}

Answer 1

Я не эксперт, но я думаю, что вы должны зафиксировать событие click на canvas, а затем написать function, который проверяет, находится ли точка нажатия внутри радиуса круга. (т. е. разница между выбранной точкой и началом круга меньше или равна радиусу).

Answer 2

Вы можете добавить событие mousedown на свой холст или просто можете добавить прослушиватель событий как

canvas.addEventListener('mousedown', function(evt) 
{
    var mousePos = getMousePos(canvas, evt);
    var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
        //Here ur getting mouse position x and y coordinates. 
  },
 false);

Answer 3

Конечно, вы можете.Если вы хотите поменять курсор на руку (как это делается для ссылок), вы можете сделать это тоже.Просто добавьте событие onmousemove на свой холст, и если расстояние мыши от центра (возможно, вам придется использовать Пифагор) меньше радиуса, измените CSS-свойство холста курсора на указатель.Иначе, конечно, вернуть свойство CSS по умолчанию.Точно так же добавьте событие onclick и определите, когда на него нажимают, и сделайте свое дело, когда это правда.Поэтому у вас на холсте есть кликабельный круг.