沿椭圆移动点
我已经在画布上创建了一个椭圆，现在我需要从原点绘制三条线。举个例子，假设第一条线是90度(垂直)，所以点是(0，10)。我需要另外两条线在两个方向上都离点有x像素的距离。
我确信我描述得不够好，但基本上我要做的是，从一个已知椭圆上的一点，找到另一个x距离外的点，它位于这个椭圆上。
我试着寻找椭圆的圆弧，但似乎没有适合我正在寻找的东西。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-02-13 21:18:23
对于椭圆：
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。)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14863188
复制相关文章
相似问题
沿椭圆路径移动对象
沿向量移动点
沿中心点旋转的椭圆阵列
如何创建动画，点将沿椭圆线移动？
沿椭圆圆周得到16个等距点
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
