鼠标悬停圆圈 HTML5 画布

Question

我想知道如何将一个区域设置为画布中定义的半复杂形状（圆形），以便当用户将鼠标悬停在该形状上时，将调用一个函数。

我根本不想使用 KineticJS 等库。

目前我已经为画布元素添加了一个事件监听器，以便在鼠标移动时调用多个函数；其中之一计算出相对于画布的鼠标 x/y 坐标。因此，使用基本 if 语句（因为画布是交互式的，并且每次鼠标移动都会重新绘制），任何矩形形状都很容易“听”。

对于圆形对象以及三角形对象，有没有办法使用三角函数和 if 语句的类似方法？

或者有没有更好的方法在画布上拥有多个区域，鼠标悬停时调用函数？

干杯

Answer 1

如果您知道鼠标在哪里，并且知道圆在画布上的位置，那么当鼠标到圆心的距离小于半径时，鼠标就在圆内。如果确实如此，请手动调用您需要调用的任何内容。

希望有所帮助

Answer 2

如果您要制作多个半复杂的形状并且不想制作任何复杂的数学函数，您可以随时使用幻影画布。

这个想法是，当您想要测试一个形状时，您可以将每个相关的形状绘制到内存中的画布上，并测试鼠标 x/y 像素以查看是否存在某些东西。

我在this tutorial.详细说明了如何做到这一点

它适用于少量对象，但如果您计划在屏幕上显示超过 200 个对象，您将需要切换到更快的数学方法。