鼠标悬停圈HTML5画布

myo*_*yol 4 html5 canvas event-handling

我想知道如何将一个区域设置为画布中定义的半复杂形状(圆形),因此当用户将鼠标悬停在形状上时,将调用一个函数.

我根本不想使用库,比如KineticJS等.

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

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

或者有更好的方法在画布上有多个区域,鼠标悬停,调用函数?

干杯

Dec*_*ook 9

如果您知道鼠标的位置并且您知道圆圈在画布上的位置,那么当鼠标到圆心的距离小于半径时,鼠标就在圆圈内.如果这是真的,请手动拨打您需要拨打的电话.

希望有所帮助


Sim*_*ris 6

如果您要使用多个半复杂形状并且不想创建任何复杂的数学函数,则可以始终使用鬼画布.

我们的想法是,当您想要测试形状时,将每个相关形状绘制到内存中的画布上并测试鼠标x/y像素以查看是否存在某些内容.

我在本教程中详细介绍了如何操作.

它适用于少量对象,但如果你计划在屏幕上有超过200个对象,你将需要切换到更快的数学方法.