需要帮助理解JavaScript中椭圆的数学公式吗_Javascript_Animation_Math_Formula

需要帮助理解JavaScript中椭圆的数学公式吗

javascript animation math

需要帮助理解JavaScript中椭圆的数学公式吗,javascript,animation,math,formula,Javascript,Animation,Math,Formula,需要帮助理解此代码，它用于使图像以椭圆形移动。我不明白的是，e，px和py变量的公式。e变量以复杂的方式定义到底是什么？我知道它使用了一些数学公式，但我不知道是哪一个 var b = 125; var h = 115; var rx = 7; var ry = 4; var e = 0; function update() { setInterval(function() {

需要帮助理解此代码，它用于使图像以椭圆形移动。我不明白的是，e，px和py变量的公式。e变量以复杂的方式定义到底是什么？我知道它使用了一些数学公式，但我不知道是哪一个

         var b = 125;
         var h = 115;
         var rx = 7;
         var ry = 4;  
         var e = 0; 

    function update() {
        setInterval(function() {
            e = (e + Math.PI / 360) % (Math.PI * 2);
            rotate(e);
        }, 10);

        var lyd = new Audio("Vedlegg/skoytelyd.mp3");
        lyd.play();
    }

    function rotate(e) {
        var px = b + rx * Math.cos(e)*b/2; 
        var py = h + ry * Math.sin(e)*h/2;

        document.getElementById("punkt").style.left = px + "px";
        document.getElementById("punkt").style.top = py + "px"; 
    }
    </script>
    <style>
        div {
            position: fixed;
        }
        #sentrum {
            background: black;
            left: 100px;
            top: 50px;
        }

        #skoyteloper {
            position: absolute;
            top: 190px;
            left: 450px;
            width: 60px;
            height: 60px;
        }
    </style>
</head>
<body>
    <div id="sentrum"></div>
        <img src="Vedlegg/bane.jpg" id="imgBane"></img>
    </div>
    <div id="punkt">
        <img src="Vedlegg/skoyteloper.png" id="skoyteloper"></img>
    </div>
    <a href="animasjon.html">TILBAKE</a>
</body>

var b=125；
var h=115；
var rx=7；
var-ry=4；
var e=0；
函数更新（）{
setInterval（函数（）{
e=（e+Math.PI/360）%（Math.PI*2）；
轮换（e）；
}, 10);
var lyd=新音频（“Vedlegg/skoytelyd.mp3”）；
lyd.play（）；
}
函数旋转（e）{
var px=b+rx*数学系数（e）*b/2；
var py=h+ry*数学sin（e）*h/2；
document.getElementById（“punkt”）.style.left=px+“px”；
document.getElementById（“punkt”）.style.top=py+“px”；
}
div{
位置：固定；
}
#sentrum{
背景：黑色；
左：100px；
顶部：50px；
}
#斯科耶特洛普{
位置：绝对位置；
顶部：190px；
左：450px；
宽度：60px；
高度：60px；
}

窦和余弦：想象一个90°角的三角形。一条线是水平的，另一条线在右侧，是垂直的，第三条线从左下到右上。左边的角度我们称之为e（是的，它是函数中的e）

e窦定义为右侧的垂直线除以对角线；余弦e=水平线（与角度e接触）/对角线

现在画一个圆圈，中间的角度为e，半径=对角线的长度。如果你提高角度e，你会看到垂直线变大，水平线变小（保持对角线的长度不变），直到你达到90°。当然，你可以超过90°，垂直线可以在左边。超过180°时，垂直线将指向下方（负坐标）

这就是sin和cos的用法之一：如果你设置一个角度，它们会给你一个y值和一个x值，显示一个圆上的一个点。它总是一个介于-1和+1之间的数字。示例：sin（0）=0（无垂直分量），cos（0）=1

下面的代码给出了一个围绕中心（0,0）和半径100的圆。给这个函数输入一组e的值，你就可以得到一个圆上同样多的点

function rotate(e) {
    var px = 100 * Math.cos(e); 
    var py = 100 * Math.sin(e);
}

现在，如果不是100*cos（e），而是200*cos（e），那么它就不再是一个圆了。每个x坐标的距离是圆的两倍。不同的rx和ry将产生椭圆

变量b&h用于将椭圆的中心推到image/div/canvas/…内部的某个位置。。。而不是在一个角落（然后你剪辑椭圆的大部分）

这有帮助吗？

这是旋转角度，以弧度为单位。它介于0和

pi*2之间。几何上，是半径为1的圆弧后的字符串长度。谢谢，但我不明白这个公式是如何使图像移动成椭圆形的@雅格布法尔如果将rx和ry设置为1，则公式将生成一个以b&h为中心的圆。rx为每个x坐标提供一个系数。例如，rx=2=>得到的不是一个圆，而是一个挤压圆（称为椭圆），其中x坐标距离中心的距离是每个y坐标距离中心的两倍。（同上，但与ry相反）谢谢，@Emmanueldlay但是e变量的cos和sin值是x坐标和y坐标吗？