キャンバスに楕円を作成したので、原点から 3 本の線を引く必要があります。例として、最初の線が 90 度 (垂直) で、点が (0, 10) であるとします。他の 2 つの線は、ポイントから両方向に x ピクセル離れている必要があります。
私はこれを十分に説明していないと確信していますが、基本的に私がやろうとしているのは、既知の楕円上の点から、楕円上にある x 距離離れた別の点を見つけることです。
楕円の弧を探してみましたが、探しているものに合うものはないようです。
キャンバスに楕円を作成したので、原点から 3 本の線を引く必要があります。例として、最初の線が 90 度 (垂直) で、点が (0, 10) であるとします。他の 2 つの線は、ポイントから両方向に 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>
(これまで HTML キャンバスを使用したことがないため、 https://www.scienceprimer.com/draw-oval-html5-canvasをベースとして使用します。)
sin
Andrew Morton の答えは適切ですが、 aと an の代わりに 1 つの平方根を使用できます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);
}