---勾股定理
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. iptables简介及常用命令

    相关文件 iptables服务配置文件 -rw-------. 1 root root 2374 9月 4 2017 /etc/sysconfig/iptables-config iptables规则 ...

  2. C# WinForm控件之advTree

    0.属性和方法 //属性方法 advTree1.DragDropEnabled = !advTree1.DragDropEnabled;//控制是否可以拖动节点到 不同的层级下 advTree1.Mu ...

  3. git提交遇到.suo文件无法提交的问题

    这个只是我个人遇到的一个问题小记 由于最近做的项目使用VS编辑器的,在用它集成创建的项目里,每次提交都会有个后缀名为.suo的文件在修改的文件列表里.这时直接进行提交会报错, 1.我将xx.suo/x ...

  4. USACO2012 Moo /// 模拟 oj21548

    大致题意: 递归地描述序列:设S(0)为3个字符的序列“mo o”.然后在较长的序列小号(ķ)通过取序列的拷贝获得小号(ķ -1),则“摩... O”与ķ 2 O公司,然后该序列的另一个拷贝小号(ķ  ...

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

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

  6. 【HDOJ】 P2054 A == B ?

    题目意思不太多解释,具体WA的情况可以举出一下特例 0 +0 0.00 0 +1 -2 +1.00 -1.00 +.2 -.2 .0 .1 等等 不过可以发现对上面的数据处理,可以分为以下几步 1.找 ...

  7. PHP之数据连接方法（二）

    首先API接口,无非就是通过该程序去处理数据的数据,及判断数据的准确性. 因此我们需要一个DBTool的操作方法. DBTool地址:https://github.com/gfarmhuang/DBT ...

  8. redis数据库操作

    一.String(字符串)操作 String在redis中的存储是按照key-value的形式存储 1.SET key value [EX seconds] [PX milliseconds] [NX ...

  9. 发现一个新的远程软件 gotohttp

    之前直到远程桌面连接是TeamViewer 替换的原因是: 被控制端版本 11.0.x (很久以前安装的),而我本地的Teamviewer是 14.x, 去连接,好像提示被控制端的版本太低:本地使用 ...

  10. Java 获取当前路径的方法总结

    Java 获取当前路径的方法总结 1.利用System.getProperty()函数获取当前路径: System.out.println(System.getProperty("user. ...