我在 Canvas 上创建了一个椭圆，现在我需要从原点绘制三条线。例如，假设第一条线是 90 度(垂直)，所以点是 (0, 10)。我需要其他两条线在两个方向上都与该点相距 x 像素。
我确定我对此描述得不够好，但基本上我想做的是从已知椭圆上的一个点，找到位于椭圆上 x 距离外的另一个点。
我曾尝试寻找椭圆弧，但似乎没有任何东西符合我的要求。
最佳答案
对于椭圆:
x = a cos(t)
y = b sin(t)
所以:
x/a= cos(t)
t = acos(x/a)
y = b sin(acos(x/a))
插入您的 a、b 和 x 值，您将得到 y。
参见 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 Canvas 。)
关于javascript - 沿椭圆移动一点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14863188/