椭圆可点区域的实现

这个题是从叶落为重生的一篇博客上看到的，觉得挺有想法，就整理了下，做个记录。

记录思路，不考虑兼容性。

题干如题，实现一个椭圆可点区域

分析与思考

• 思路一：DOM + border-radius

  • 看到题后我的第一反应就是这个，但发现题主并没有采用border-radius的方式，以为这样行不通，自己试了下，是可以的。这个思路很简单，也很实用，就普通用border-radius实现一个椭圆的div，然后绑定点击事件即可。对于复杂场景的，可以先画一个透明div，然后定位到特定位置，实现点击图片的椭圆可点区域。

• 思路二： 获取当前点击位置坐标，根据中心点位置计算当前点击位置是否在椭圆范围内

  相比第一种思路，这个思路就很麻烦了，但是很有参考和借鉴意义，在某些复杂逻辑里也会有使用场景。

    1. 定义椭圆中心点位置O（x0,y0），长轴和短轴半径（a,b）
    2. 获取当前鼠标位置P（x,y）
    3. 计算当前鼠标位置P到椭圆中心点的横纵坐标分别是（x - x0），（y - y0）
    4. 由椭圆的标准方程可知，若(x - x0)²/a² + (y - y0)²/b² <= 1 即可得点P在椭圆内，否则不在椭圆内
  

  代码就没必要贴了，思路就这样，本质是个数学题呀

参考

椭圆标准方程