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 回答