4

我在画布上创建了一个椭圆，现在我需要从原点绘制三条线。例如，假设第一条线是 90 度（垂直），所以点是 (0, 10)。我需要另外两条线在两个方向上都离点 x 像素。

我敢肯定我描述得不够好，但基本上我想做的是从已知椭圆上的一个点，找到另一个位于椭圆上的点 x 距离。

我曾尝试寻找椭圆弧，但似乎没有什么适合我正在寻找的东西。

4

2 回答 2

10

对于椭圆：

x = a cos(t)
y = b sin(t)

所以：

x/a= cos(t)
t = acos(x/a)
y = b sin(acos(x/a))

插入你的, 和的值a，你得到.bxy

见https://www.mathopenref.com/coordparamellipse.html

比较粗暴：

var a=120;
var b=70;

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");

var xCentre=c.width / 2;
var yCentre=c.height / 2;


// draw axes
cxt.strokeStyle='blue';
cxt.beginPath();
cxt.moveTo(0, yCentre);
cxt.lineTo(xCentre*2, yCentre);
cxt.stroke();

cxt.beginPath();
cxt.moveTo(xCentre, 0);
cxt.lineTo(xCentre, yCentre*2);
cxt.stroke();

// draw ellipse
cxt.strokeStyle='black';

cxt.beginPath();

for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01 ) {
    xPos = xCentre - (a * Math.cos(i));
    yPos = yCentre + (b * Math.sin(i));

    if (i == 0) {
        cxt.moveTo(xPos, yPos);
    } else {
        cxt.lineTo(xPos, yPos);
    }
}
cxt.lineWidth = 2;
cxt.strokeStyle = "#232323";
cxt.stroke();
cxt.closePath();

// draw lines with x=+/- 40
var deltaX=40;

var y1=b*Math.sin(Math.acos(deltaX/a));

cxt.strokeStyle='red';
cxt.beginPath();
cxt.moveTo(xCentre+deltaX, yCentre-y1);
cxt.lineTo(xCentre, yCentre);
cxt.lineTo(xCentre-deltaX, yCentre-y1);
cxt.stroke();
<html>
<head><title>Ellipse</title></head>
<body>
    <canvas id="myCanvas" style="position: absolute;" width="400" height="200"></canvas>
</body>
</html>

（使用https://www.scienceprimer.com/draw-oval-html5-canvas作为基础，因为我以前从未使用过 HTML 画布。）

于 2013-02-13T21:18:23.427 回答
5

安德鲁莫顿的答案是足够的，但你可以用一个平方根而不是 asin和 an acos。

假设您有一个以原点为中心的椭圆，其半径沿 a 的 X 轴，半径沿b的 Y 轴。这个椭圆的方程是

x 2 / a 2 + y 2 / b 2 = 1。

为y解决这个问题

y = ± b sqrt(1 - x 2 / a 2 )

您可以选择合适的符号。根据您的帖子，您需要正平方根。

翻译成 Javascript：

function yForEllipse(a, b, x) {
    return b * Math.sqrt(1 - x*x / a * a);
}
于 2013-02-13T22:37:48.407 回答