zoukankan      html  css  js  c++  java
  • JS模拟圆周运动

    Math.sin(x) x 的正玄值。返回值在 -1.0 到 1.0 之间;
    Math.cos(x) x 的余弦值。返回的是 -1.0 到 1.0 之间的数;
    这两个函数中的X 都是指的“弧度”而非“角度”,弧度的计算公式为: 2*PI/360*角度;
    30° 角度 的弧度 = 2*PI/360*30

    如何得到圆上每个点的坐标?
    解决思路:根据三角形的正玄、余弦来得值;
    假设一个圆的圆心坐标是(a,b),半径为r,
    则圆上每个点的
    X坐标=a + Math.sin(2*Math.PI / 360) * r ;
    Y坐标=b + Math.cos(2*Math.PI / 360) * r ;注意在代码里是减号 - 

    如何求时钟的秒针转动一圈的轨迹?
    假设秒针的初始值(起点)为12点钟方向,圆心的坐标为(a,b)。
    解决思路:一分钟为60秒,一个圆为360°,所以平均每秒的转动角度为 360°/60 = 6°;

    for(var times=0; times<60; times++) {
          var hudu = (2*Math.PI / 360) * 6 * times;
           var X = a + Math.sin(hudu) * r;
           var Y = b - Math.cos(hudu) * r    //  注意此处是“-”号,因为我们要得到的Y是相对于(0,0)而言的。
    }

    参考:Math.PI和Math.sin() 与 Math.cos()搭配使用详解

    案例:

    <!DOCTYPE html>
    <html lang="en">
    
        <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <style type="text/css">
                .main {
                    width: 800px;
                    height: 800px;
                    background-color: black;
                    position: relative;
                    margin: auto;
                    
                }
                .fix {
                    width: 20px;
                    height: 20px;
                    background-color: red;
                    border-radius: 50%;
                    position: absolute;
                    left: 390px;
                    top: 270px;/*390 - 120:圆的12点方向*/
                }
                .show{
                    width: 20px;
                    height: 20px;
                    background-color: lightseagreen;
                    border-radius: 50%;
                    position: absolute;
                    left: 390px;
                    top: 390px;
                }
            </style>
            <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    
        </head>
    
        <body>
            <div class="main">
                <div class="fix">
    
                </div>
                <div class="show">
                    
                </div>
            </div>
        </body>
        <script type="text/javascript">
            $(function() {
                
            /*如何求时钟的秒针转动一圈的轨迹?
               假设秒针的初始值(起点)为12点钟方向,圆心的坐标为(a,b)。
               解决思路:一分钟为60秒,一个圆为360°,所以平均每秒的转动角度为 360°/60 = 6°;
            */            
                var times = 0;
                var r = 120;// 圆形半径
                setInterval(function(){
                    times ++ ;
                    if(times > 60){
                        times = 0;
                    }
                    var hudu = (2 * Math.PI / 360) * 6 * times;
                    var X = 390 + Math.sin(hudu) * r;
                    var Y = 390 - Math.cos(hudu) * r //  注意此处是“-”号,因为我们要得到的Y是相对于(0,0)而言的。
                    $(".fix").animate({left: X + "px",top: Y + "px"});
                },1000);
            })
        </script>
    
    </html>
  • 相关阅读:
    golang 引用相对路径package
    LiteIDE 在 Windows 下为 Go 语言添加智能提示代码补全
    C#代码实现把网页文件保存为mht文件
    AE开发中关于 “无法嵌入互操作类型.........请改用适用的接口”问题的解决方法
    Windows下visual studio code搭建golang开发环境
    Eclipse配置开发Go的插件——Goclipse
    go语言条件语句 if else
    Go语言基础:method
    GO语言基础之method
    go中的接口
  • 原文地址:https://www.cnblogs.com/xiejn/p/11925545.html
Copyright © 2011-2022 走看看