圆周运动与勾股定理

最新推荐文章于 2021-12-31 19:08:23 发布

stupidcc

最新推荐文章于 2021-12-31 19:08:23 发布

阅读量539

点赞数 1

分类专栏： js原生 css

本文链接：https://blog.csdn.net/e87e09e11/article/details/77341708

版权

js原生同时被 2 个专栏收录

31 篇文章 1 订阅

订阅专栏

css

8 篇文章 0 订阅

订阅专栏

原来js还可以和数学公式勾股定理结合，而且他们结合后并没有变得枯燥无味，反而可以制作出更好的动画。

这面将一个js动态画圆的demo,在这之前需要普及一下数学知识，虽然这些知识初中就学过，估计也都还给老师了。哈哈

勾股定理直角三角形的两个直角边的平方和等于第三边的平方和，a^2+b^2=c^2

sin30=1/2 cos60=1/2 (因为根号不会打所以sin60 cos30就不普及拉)

sin=对边／斜边 cos=邻边／斜边

r是半径 PI是圆周率一弧度＝r 周长：2PIr 那么一个圆的弧度是多少？ 2PIr/r=2PI => 360度＝2PI

PI=180度 => 1度＝PI/180

Math.sin(弧度（度数＊PI/180 转弧度）)＝对边／斜边

Math.cos(度数＊PI/180)=邻边／斜边

<style>
    #div1{position:absolute;width:20px;height:20px;background-color: red;left:800px;top:300px;}
    .point{position: absolute;border:1px solid blue;height:1px;width:1px;background-color: blue}
</style>
<body>
<div id="div1"></div>

</body>
<script>
    /*
    * 做圆周运动 半径r=100
    * */
    var r=100
    var x=700
    var y=300
    var divObj=document.getElementById("div1")
    var num=0
    setInterval(function () {
        num++
       /* Math.sin(num*Math.PI/180)=a/r;
        Math.cos(num*Math.PI/180)=b/r;*/
        a=Math.sin(num*Math.PI/180)*r
        b=Math.cos(num*Math.PI/180)*r
        divObj.style.left=(b-0+700)+"px"
        divObj.style.top=(a-0+300)+"px"
        var point=document.createElement("div")
        point.className="point"
        document.body.appendChild(point)
        point.style.left=b+x+"px"
        point.style.top=a+y+"px"

    },30)

</script>

以上代码就是一个小矩形做圆周运动的demo