1

ここで引用されている例を利用しようとしています: http://www.physicsforums.com/showthread.php?t=248191

この例を利用する単純な JavaScript を作成しました (または、少なくとも意図したとおりです) が、角度として設定したものに反応する方法に完全に当惑しています。私はそれがどこで動作することを期待しています (極座標を使用すると仮定します)、角度として 0 を使用すると、スポットは円の東側、南側で 90 度、西側で 180 になるはずです。ただし、これはまったく機能していません。それが何をしているのかを説明することすらできません。0～4.7くらいの間をぐるぐる回っているようです。もちろん、私がこれを完全に台無しにして、本当に明白な何かを見逃している可能性があります (おそらく)。

とにかく...私のコードは完全に下にあります。実行するには、新しい .html ドキュメントにカット アンド ペーストするだけです。私は何が間違っているのか本当に興味があります。

<HTML>

<script>
startMotion = function(){
    setInterval("moveDots()", 1000);
}

function moveDots(){
    oDot = document.getElementById("oDot");
    iDot = document.getElementById("iDot");
    tDisplay = document.getElementById("tDisplay");



    oDot.style.left = (t1Radius*(Math.cos(angle)) + ccX)+ "px"
    oDot.style.top = (t1Radius*(Math.sin(angle)) + ccY)+ "px"

    iDot.style.left = (t2Radius*(Math.cos(angle)) + ccX) + "px"
    iDot.style.top = (t2Radius*(Math.sin(angle)) + ccY)+ "px"

    tDisplay.value = "x=" + iDot.style.left + "\n";
    tDisplay.value += "y=" + iDot.style.top + "\n";
    tDisplay.value += "angle=" + angle + "\n";

    angle += angleSpeed;
    angle %= 360;
}

var angleSpeed = 5; //amount of change in angle from animation point to animation point
var ccX = 200; //circle center coordinate X
var ccY = 200; //circle center coordinate Y
var t1Radius = 200; //radius for outside dot
var t2Radius = 100; //radius for inside dot
var angle = 0; //this number will keep changing to move the dots around the circumference 

</script>


<style>
body{

    text-align:center;
    margin:0;
}
#track{
    margin: 0 auto; 
    text-align: left; 
    position: relative;
    width:400px;
    height:400px; 
    background-color:pink;
}
#iDot{
    position:absolute;
    top:0px;
    left:0px;   
    width:10px;
    height:10px;
    background-color:green;
}
#oDot{
    position:absolute;
    top:0px;
    left:0px;
    width:10px;
    height:10px;
    background-color:blue;
}
#feedback{
    position:absolute;
    left:0px;
    top:0px;
    width:200px;
    height:100px;
    background-color:black;

}
#tDisplay{
    background-color:black;
    color:white;
    font-size:10px;
    font-family:arial, helvetica;
    width:300px;
    height:100px;
}
#center{
position:absolute;
left:195px;
top:195px;
width:10px;
height:10px;
background-color:white;
}
</style>
<body onLoad="startMotion()">
<div id="feedback">
    <textarea id="tDisplay"></textarea>
    </div>
<div id="track">
    <div id="center"></div>
    <div id="iDot"></div>
    <div id="oDot"></div>

</div>
</body>

</html>
4

5 に答える 5

4

Math.cos()およびその親族は、度ではなく、ラジアンを期待します。π を掛けてから 180 で割ることで、度からラジアンに変換できます (2π ラジアン = 360 度)。

于 2010-01-19T05:50:15.843 に答える
4

度ではなく、ラジアンを使用する必要があります。の係数を掛けpi / 180て変換します。

var theta = angle * Math.PI / 180;
oDot.style.left = (t1Radius*(Math.cos(theta)) + ccX)+ "px"
// ...
于 2010-01-19T05:52:51.050 に答える
3

最初に角度を度からラジアンに変換する必要があります。

 function moveDots(){
     var rad_angle = angle * Math.PI / 180;
     ...
     ... Math.cos(rad_angle) ...
 }
于 2010-01-19T05:51:32.737 に答える
2

JavaScript の三角関数はラジアン単位の角度を想定しているため、呼び出す前に角度の値をラジアンに変換する必要があります。

簡単に行うことができます。度数に を掛けるだけですπ/180。つまり、単純な関数です。

function toRad(deg) {
  return deg * Math.PI / 180;
}

なぜなら：

方式
(出典: krellinst.org )

于 2010-01-19T05:51:38.990 に答える
0

ケビンの答えは正しいですが、不完全です。Javascript は度数ではなくラジアンを使用します。

度で測ると、円の中に 360 度あります。

ラジアンで測定すると、円には 2*pi ラジアンがあります。

度からラジアンに変換するには、2*pi / 360、つまり約 0.017453 を掛けます。

于 2010-01-19T05:56:10.980 に答える