如何检查我的鼠标坐标是否悬停在椭圆形上？

Question

这个问题独立于输出，但为了简单起见，我们将问题保留在 HTML 画布上。我有一个椭圆形/椭圆形，当您将鼠标悬停在它上面时，我想突出显示它。在我使用这个问题中描述的一段代码之前（mouseover circle HTML5 canvas）。

伪代码；

const circle = { x: 10, y:10, radius:5 };

const distanceBetween: (point1, point2) => {

    var a = point1.x - point2.x;

    var b = point1.y - point2.y;

    return  Math.sqrt( a*a + b*b );

}

var radius = distanceBetween({x: mouse.x, y: mouse.x}, {x: circle.x, circle.y});

// If radius is below 5, mouse is on top of the circle.

但是因为这个椭圆形的 x 和 y 的半径不同。仅使用半径是不够的。我一直在通过分别隔离 x 半径和 y 半径的问题进行试验。但我就是找不到解决问题的缺失链接。

var ellipse = {cx: 10, cy:10, rx: 5, ry:10}

我需要什么样的公式来检查我的鼠标 x/y 坐标是否悬停在椭圆上？

Answer 1

var ellipse = {cx: 10, cy:10, rx: 5, ry:10}var distance = Math.pow(mouse.x - ellipse.cx, 2) / Math.pow(ellipse.rx, 2) + Math.pow(mouse.y - ellipse.cy,2) / Math.pow(ellipse.ry,2);// distance < 1 is everything within the ellipse.// distance > 1 is everything outside the ellipse.来源：https ://math.stackexchange.com/a/76463/545328