Question

我正在尝试使用此处引用的示例： 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>

Answer 1

Math.cos()及其亲属期望弧度，而非度数。您可以通过乘以π然后除以180来将度数转换为弧度。（2π弧度= 360度）

Answer 2

你需要使用弧度，而不是度数。乘以因子pi / 180来转换：

var theta = angle * Math.PI / 180;
oDot.style.left = (t1Radius*(Math.cos(theta)) + ccX)+ "px"
// ...

Answer 3

您需要先将角度从度数转换为弧度。

 function moveDots(){
     var rad_angle = angle * Math.PI / 180;
     ...
     ... Math.cos(rad_angle) ...
 }

Answer 4

JavaScript上的三角函数期望以弧度为单位的角度，您应该在调用它们之前将度数值转换为弧度。

你可以很容易地做到，只需将度数乘以π/180，即一个简单的函数：

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

由于：

formula http://www2.krellinst.org/UCES/archive/resources/trig/img5.gif

Answer 5

凯文的回答是正确的，但不完整。 Javascript使用弧度，而不是度数。

使用度数进行测量时，圆圈中有360度。

用弧度测量时，圆圈中有2 * pi弧度。

要将度数转换为弧度，请乘以2 * pi / 360或约0.017453。

获得圆坐标时遇到问题

5 个答案: