---勾股定理
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. leetcode.字符串.5最长回文子串-Java

    1. 具体题目 给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为 1000. 示例 1: 输入: "babad" 输出: "bab" ...

  2. Vuex 源码解析

    先来看一下这张Vuex的数据流程图,熟悉Vuex使用的同学应该已经有所了解. Vuex实现了一个单向数据流,在全局拥有一个State存放数据,所有修改State的操作必须通过Mutation进行,Mu ...

  3. CR0 - CR4 ，5个寄存器，留念，每次都要翻手册，太费事了

  4. python_learn Ⅰ

    基于 廖雪峰python3教程 学习. 目录: 01_输入输出.py 02_list.tuple.py 03_条件判断.py 04_循环.py 05_利用循环排序.py 06_自定义3元2次方程的根求 ...

  5. Linux (raspberry) 安装 telnet server

    可能由于内核或者版本问题 ,网上的telnet服务器安装教程,总是无法安装成功 ,下面说说基于debian发行版(树莓派)telnet 服务器端的安装,便于以后的远程访问. 具体可以通过netstat ...

  6. JS window对象 计时器setTimeout() setTimeout()计时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。 语法: setTimeout(代码,延迟时间);

    计时器setTimeout() setTimeout()计时器,在载入后延迟指定时间后,去执行一次表达式,仅执行一次. 语法: setTimeout(代码,延迟时间); 参数说明: 1. 要调用的函数 ...

  7. redis主从复制和哨兵

    摘自:https://www.cnblogs.com/leeSmall/p/8398401.html 一.Redis主从复制 主从复制:主节点负责写数据,从节点负责读数据,主节点定期把数据同步到从节点 ...

  8. Java 的信号灯

    Semaphore可以维护当前访问自身的线程个数,并提供了同步机制.使用Semaphore可以控制同时访问资源的线程个数,例如,实现一个文件允许的并发访问数. Semaphore实现的功能就类似厕所有 ...

  9. Dockfile中的命令如何在.sh中执行

    有类似如下内容的Dokefile文件.1 RUN cd /tmp/patch \ && /lib/python3./site-packages/moduleA/a.* \ && ...

  10. Job 和 Cronjob 的使用

    Job负责处理任务,即仅执行一次的任务,它保证批处理任务的一个或多个Pod成功结束.而CronJob则就是在Job上加上了时间调度. Job 我们用Job这个资源对象来创建一个任务,我们定一个Job来 ...