问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js控制一个dom做圆周运动的算法思路

头像
rand
    2k35120134

    有图有真相，图中绿色的圆点是一个span标签，灰色背景是一个div容器，控制span在div中做沿着红色做圆周运动，求思路
    图片描述

    javascript
    阅读 11.4k
    5 个回答
    得票最新
    社区维基
    1
    ✓ 已被采纳
    头像
    _我已经从中二毕业了
      7.9k82131

      题主说的是圆周运动吧，这样的话就要用到了初中数学的一点只是：三角函数以及弧度转角度的公式。

      大概思路：

      • 先看下图：
        8d5494eef01f3a2913d7b8ba9925bc315c607ca2.jpg

        其实我们只要算出每1°上的x轴坐标和y轴坐标就行了，然后他跑完玩了360°之后就是一个圆周运动。

      • 使用sin和cos三角函数求出x坐标以及y坐标：

        先了解一下sin和cos三角函数：

        b17eca8065380cd7e44766b9a244ad345982810d.jpg
        908fa0ec08fa513d1b84a88a3e6d55fbb2fbd9bc.jpg

        然后我们就知道：

        Math.sin( 角度 * Math.PI/180 ) = x / 半径;
Math.cos( 角度 * Math.PI/180 ) = y / 半径;

        接着我们就根据上面的推导就可以得出x和y的坐标：

        x = Math.sin( 角度 * Math.PI/180 ) * 半径
y = Math.cos( 角度 * Math.PI/180 ) * 半径

      大概思路就是上面所说的，下面就贴个demo给你看看吧：demo

      头像
      草里一条鱼
        197289

        用角度计算x,y轴坐标，不会画图抱歉，以圆的半径也就是这个圆的width的一半利用角度变化，计算每个角度在圆上的x,y轴的坐标

        头像
        姜河
          401
              var r = 1;
    for(let a in 0 ... 2*PI)
       x = r*Math.sin(a)
       y = r*Math.cos(a)
       draw(x,y)
    endfor
          头像
          rand
            2k35120134

            这是我自己找到的一个方法，原理就是利用sin和cos，乘以弧度

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>radius</title>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>


<script>
var dt=0.5;  //弧度0.5,大概30°
function run(){
        var r=100;
        var Py=Math.sin(dt)*r;
        var Px=Math.cos(dt)*r;
        $('div').css({'left':Px+'px','top':Py+'px'})
        dt+=0.03
}
window.setInterval('run()',1)
</script>


</head>

<body>



<div style="height:60px;width:60px; background:#000;  position:absolute; top:100px; left:200px; border-radius:60px;"></div>


</body>
</html>
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题