---勾股定理
a*a + b*b =c*c

---三角函数
正弦 : sin
余弦 : cos
正切 : tan
余切 : cot
正弦定理
a/sinA = b/sinB =c/sinC = 2r（r为外接圆半径）
余弦定理
cosA = b*b + c*c - a*a / 2bc
cosB = c*c + a*a - b*b / 2ca
cosC = a*a + b*b - c*c / 2ab

---什么是弧度
一个角度到底代表多少弧度：这个角度所包含的外接圆的弧长/外接圆的半径

360 角度 = 2*PI*r/r 弧度(360角度 = 2*PI 弧度)
===> （单位换算）
1角度 = PI/180 弧度
1弧度 = 180/PI 角度

                                              //角度         
              testNode.style.left = startX + (deg*Math.PI/)*step/ +'px';
                                             //Math.sin() 函数返回一个数值的正弦值。

              testNode.style.top = startY + Math.sin( deg*Math.PI/ )*step*+"px";

---角度转弧度 弧度转角度
弧度值 = 角度值*PI/180 角度值 = 弧度值*180/PI

---三角函数图像
曲线运动

---完成曲线运动

---与canvas结合

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            #test{

                position: absolute;

                left: 200px;

                top: 300px;

                width: 10px;

                height: 10px;

                background: black;

            }

            .box{

                position: absolute;

                border: 1px solid;

            }

        </style>

    </head>

    <body>

        <div id="test"></div>

    </body>

    <script type="text/javascript">

        window.onload=function(){

            var testNode = document.querySelector("#test");

            var startX = testNode.offsetLeft;

            var startY = testNode.offsetTop;

            //角度

            var deg =;

            var step = ;

            setInterval(function(){

                deg++;

                testNode.style.left = startX + (deg*Math.PI/)*step/ +'px';

                testNode.style.top = startY + Math.sin( deg*Math.PI/ )*step*+"px";

                var boxNode = document.createElement("div");

                boxNode.classList.add("box");

                boxNode.style.left=testNode.offsetLeft+"px";

                boxNode.style.top=testNode.offsetTop+"px";

                document.body.appendChild(boxNode);

            },/)

        }

    </script>

</html>

js数学公式-曲线运动的更多相关文章

  1. javascript开源大全

    javascript开源大全 Ajax框架-jQuery 可视化HTML编辑器-CKEditor 国产jQuery-UI框架-(jUI)-DWZ 网页开发FireFox插件-Firebug 服务器端的 ...

  2. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  3. js抛物线动画——加入购物车动效

    参考文章:http://www.zhangxinxu.com/wordpress/2013/12/javascript-js-元素-抛物线-运动-动画/ parapola.js /*! * by zh ...

  4. javascript运动系列第三篇——曲线运动

    × 目录 [1]圆周运动[2]三维圆周 [3]钟摆运动 [4]抛物线[5]流体运动 前面的话 上一篇介绍了变速运动,但只实现了直线运动.如果元素的left和top同时运动,并遵循不同的曲线公式,则会进 ...

  5. cnblog中添加数学公式支持

    在博客中使用数学公式,是一件相对麻烦的事儿,大量的截图和插入图片不仅耗费极大的精力,而且影响写作体验. 虽然对于公式显示已经有多种解决办法,但大多数需要安装插件.而MathML这一雄心勃勃的网页数学语 ...

  6. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  7. JS魔法堂：彻底理解0.1 + 0.2 === 0.30000000000000004的背后

    Brief 一天有个朋友问我“JS中计算0.7 * 180怎么会等于125.99999999998,坑也太多了吧!”那时我猜测是二进制表示数值时发生round-off error所导致,但并不清楚具体 ...

  8. 【其它】 MathJax - 网页中显示数学公式的终极武器

    最近在学习一些数学课程.但时间一长,发现很多东西又都忘了.而且过程中的很多心得没有留下记录,觉得挺可惜的.所以决定开个博客来记录一些东西,也希望能同数学爱好者们一起学习. 但写数学博客首先得解决显示数 ...

  9. 在博客中使用MathJax写数学公式

    前言 总结一些在博客园使用MathJax写数学公式的经验. 博客园 设置使用数学公式 进入你的博客:管理 > 选项 里面有个启用数学公式支持,选上后保存. 这时,你就可以在你的博客里写数学公式了 ...

随机推荐

  1. Maven Optional & Exclusions使用区别

    Optional和Exclusions都是用来排除jar包依赖使用的,两者在使用上却是相反. Optional定义后,该依赖只能在本项目中传递,不会传递到引用该项目的父项目中,父项目需要主动引用该依赖 ...

  2. react组件中的方法？

    SetState 设置状态 ReplaceState 替换状态 setProps设置属性 replacerProps替换属性 forceUpdate 强制更新 findDOMNode获取DOM节点 i ...

  3. beforeEach的深入研究，及beforeEach和beforeRouteEnter区别？

    之前一直困惑它俩的区别,也没找到合适的文档,直到有天看到一篇博客,一起来学习下: 之前是在created钩子函数里面,发现这是在今天当前页面之后了.先回顾一下钩子函数beforeEach const ...

  4. C语言结构体注意点

    #include <stdio.h> int main() { /*************************************************** *定义结构体变量的 ...

  5. CKEditor与CKFinder学习--自定义界面及按钮事件捕获

    原文地址:CKEditor与CKFinder学习--自定义界面及按钮事件捕获  讨厌CSDN的广告,吃香太难看! 效果图 界面操作图 原始界面 调整后的界面(删除了flush,表单元素等) 该界面的皮 ...

  6. UVA11427 Expect the Expected 概率dp+全概率公式

    题目传送门 题意:小明每晚都玩游戏,每一盘赢的概率都是p,如果第一盘就赢了,那么就去睡觉,第二天继续玩:否则继续玩,玩到赢的比例大于p才去睡:如果一直玩了n盘还没完成,就再也不玩了:问他玩游戏天数的期 ...

  7. Stack&Heap的理解

    Heap(堆):在英文中有杂乱的堆意思,意译中文为堆:其特点为先进先出. 堆空间分配:一般由程序员分配释放, 若程序员不释放,程序结束时可能由OS回收,分配方式倒是类似于链表. Stack(栈):在英 ...

  8. layui中load具体用法

    遮盖窗体,demo: layer.load(,{ // content: "加载中...", shade: [0.4,'#000'], //0.1透明度的白色背景 time:* } ...

  9. Oracle 、MySql 数据库表被锁的原因分析

    记录一次准备给客户预演示出现的问题 事故的背景: 当所以功能开发完成后,开发人员在本地进行了测视已经没问题了.就把所有开发的功能模块合并到 dev 分支,进行打包,发布到预演示的线上环境.当在给相关人 ...

  10. Python自学:第四章 切片

    # -*- coding: GBK -*- players = ['charles', 'martina', 'michael', 'florence', 'eli'] print(players[0 ...