我在画布上创建了一个椭圆,现在我需要绘制三条源于原点的线条。举个例子,假设第一行是90度(垂直),所以点是(0,10)。我需要另外两条线在两个方向上距离点x个像素。
我确信我没有足够好地描述这一点,但基本上我要做的是从已知椭圆上的一个点,找到位于椭圆上的另一个距离x距离。
我曾尝试寻找椭圆弧,但似乎没有任何东西适合我要找的东西。
答案 0 :(得分:7)
对于椭圆:
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
。
请参阅http://www.mathopenref.com/coordparamellipse.html
相当粗鲁:
<html>
<head><title>Ellipse</title></head>
<body>
<canvas id="myCanvas" style="position: absolute;" width="400" height="200"></canvas>
<script type="text/javascript">
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();
</script>
</body>
(使用http://www.scienceprimer.com/draw-oval-html5-canvas作为基础,因为我之前从未使用过HTML画布。)
答案 1 :(得分:4)
安德鲁·莫顿的答案已经足够了,但你可以使用一个平方根而不是sin
和acos
。
假设您有一个以原点为中心的椭圆,其沿着X轴的半径为 a ,而沿着Y轴的半径为 b 。这个椭圆的等式是
x 2 / a 2 + y 2 < / sup> / 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);
}