---勾股定理
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. Java 序列化和反序列化（三）Serializable 源码分析 - 2

    目录 Java 序列化和反序列化(三)Serializable 源码分析 - 2 1. ObjectStreamField 1.1 数据结构 1.2 构造函数 2. ObjectStreamClass ...

  2. Linux apache httpd virtual配置

    必须要关闭 selinux,否则无法访问目录

  3. java-day02

    数据类型自动转换 要求:数据范围从小到大 数据类型强制类型转换 格式:范围小的数据类型 范围小的变量名 = (范围小的数据类型)原范围大的数据 注意事项: 1.可以会造成数据溢出或者是精度损失. 2. ...

  4. c# winForm DotNetBar控件之SuperGridControl

    1.添加表头 sgc.PrimaryGrid.SelectionGranularity = SelectionGranularity.Row;//点击选中一行 DevComponents.DotNet ...

  5. ps--窗口配置

    移动工具设置 v 选择图层自动选择不勾 图层ctrl + 左键 视图设置智能参考线标尺 Ctrl+r 窗口设置 关闭 库 颜色 打开 信息 字符 图层 历史记录 信息 面板选项 鼠标单位 像素 rgb ...

  6. SSD 坏了

    系统盘是SSD,系统盘坏了. 桌面所有数据都拿不回来了. 真的无奈啊,来吧,统计一下,有多少东西要重装. VS2008.VS2010.VS2013.VS2015. GITHUB.SVN.VMWare. ...

  7. vue实现curd功能

    一.实现效果 二.实现 (一)实现增加用户功能 Vuserlist组件中 <template> <div class="panel panel-default"& ...

  8. swiper-animate

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. leetcode-第11场双周赛-5089-安排会议日程

    题目描述: 自己的提交: class Solution: def minAvailableDuration(self, slots1: List[List[int]], slots2: List[Li ...

  10. Nginx的静态代理

    Nginx的静态代理 Nginx的web请求的处理机制 Nginx结合多进程和异步机制对外提供服务,异步机制使用的是异步非阻塞机制,即AIO,Nginx的master进程会生成多个worker进程,m ...