Наведите курсор мыши на холст HTML5

Question

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

Я вообще не хочу использовать библиотеки, такие как KineticJS и т. Д.

В настоящее время я добавил прослушиватель событий в элемент canvas, чтобы при перемещении мыши я вызывал несколько функций; одна из которых определяет координаты мыши по x / y относительно холста. Таким образом, любую прямоугольную форму легко «прослушать», если использовать базовый оператор if (поскольку холст интерактивен и перерисовывается при каждом движении мыши).

Для круговых объектов, а также, скажем, для треугольных объектов, есть ли способ использовать аналогичный метод с использованием тригонометрии и оператора if?

Или есть лучшие способы иметь несколько областей на холсте, которые при наведении мыши вызывают функцию?

Приветствия

Answer 1

Если вы знаете, где находится мышь, и знаете, где находится круг на холсте, тогда мышь находится внутри круга, когда расстояние от мыши до центра круга меньше радиуса.Если это правда, вручную звоните на все, что вам нужно.

Надеюсь, это помогло

Answer 2

Если вы собираетесь использовать несколько полусложных фигур и не хотите создавать сложные математические функции, вы всегда можете использовать призрачный холст.

Идея состоит в том, что когда вы хотите проверить фигуру, вы рисуете каждую соответствующую фигуру в холсте в памяти и проверяете пиксель мыши x / y, чтобы увидеть, есть ли что-то там.

Я подробно расскажу, как это сделать, в этого урока.

Он прекрасно работает для меньшего количества объектов, но если вы планируете иметь на экране более ~ 200 объектов, вам нужно перейти на более быстрые математические методы.