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

Question

这个问题独立于输出，但为了简单起见，我们将问题保留到 HTML canvas。我有一个椭圆形/椭圆形，当您将鼠标悬停在它上面时，我想突出显示它。在我使用这个问题 (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 半径的问题进行试验。但是我就是找不到缺失的link来解决问题。

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

谢谢@Berto99

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

How do I check if my mouse coordinates hover over an ellipse shape?

javascript

canvas

html5-canvas

2d

drawing