我想知道如何将一个区域设置为画布中定义的半复杂形状（圆形），这样当用户将鼠标悬停在形状上时，将调用一个函数。
我不想使用任何库，例如KineticJS等。
目前我已经向canvas元素添加了一个事件监听器，以便在鼠标移动时调用多个函数;其中一个计算出相对于画布的鼠标x / y坐标。因此，任何矩形形状都很容易“监听”使用基本的if语句（因为画布是交互式的，并且每次鼠标移动都会重新绘制）。
对于圆形对象，以及说三角形对象，有没有办法使用类似的方法使用三角函数和if语句？
或者有没有更好的方法在画布上有多个区域，鼠标悬停，调用函数？
干杯
答案 0 :(得分：9)
如果您知道鼠标在哪里并且您知道圆圈在画布上的位置，那么当鼠标到圆心的距离小于半径时，鼠标就在圆圈内。如果这是真的，请手动拨打您需要呼叫的内容。
希望有所帮助
答案 1 :(得分：6)
如果你想拥有多个半复杂的形状并且不想制作任何复杂的数学函数，你可以随时使用幽灵画布。
这个想法是，当你想测试一个形状时，你将每个相关的形状绘制到内存中的画布上，并测试鼠标x / y像素以查看是否存在某些形状。
我详细介绍了如何在this tutorial.
中执行此操作它适用于少量物体，但如果您计划在屏幕上拥有超过200个物体，则需要切换到更快速的数学方法。