html - 鼠标悬停圆圈 HTML5 Canvas

Question

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

我根本不想使用 KineticJS 等库

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

对于圆形物体以及三角形物体，有没有一种方法可以使用三角函数和 if 语句来使用类似的方法？

或者是否有更好的方法在 Canvas 上有多个区域，当鼠标悬停在上面时调用一个函数？

干杯

Answer 1

如果您知道鼠标的位置并且知道圆圈在 Canvas 上的位置，那么当鼠标到圆心的距离小于半径时，鼠标就在圆圈内。如果是这样，请手动调用您需要调用的内容。

希望对您有所帮助