使用js画图之正弦曲线


Posted in Javascript onJanuary 12, 2015

数学式:y=Asin(ωx+φ)+k

样例:http://www.zhaojz.com.cn/demo/draw7.html

JS函数的声明:

//画正弦曲线

//dot 原点

//amplitude    振幅 -- A

//initialPhase 初相 -- φ

//setover 偏距 -- k

//palstance 角速度 -- ω

//len 周期数

function drawSinusoid(dot, amplitude,initialPhase,palstance,setover, len, opts){

    var color = opts&&opts.color?opts.color:"DarkRed"; //曲线的颜色

    var max = len*2*Math.PI/w; //x的最大值

    //var x = -2*Math.PI/w/3;

    var x = 0; //x的初值

    var pre = [dot[0]+x, dot[1]+(amplitude*Math.sin(palstance*x+initialPhase)+setover)]; //y的初值

    for(;x < max;x+=5){ //每五个单位画一条线

        var cur = [dot[0]+x, dot[1]+(amplitude*Math.sin(palstance*x+initialPhase)+setover)];

        drawLine(pre, cur, {color: color}); // 画线

        pre = cur;

    }

    var d = Math.PI/(2*w);

    for(var x =0;x < max;x+=d){//描点

        var cur = [dot[0]+x, dot[1]+(amplitude*Math.sin(palstance*x+initialPhase)+setover)];

        drawPoint({

            pw:3,ph:3,color:'DarkRed',point: cur

        });

    }

    

    var pend = [dot[0]+max, dot[1]+(amplitude*Math.sin(palstance*max+initialPhase)+setover)];

    drawPoint({

        pw:3,ph:3,color:'DarkRed',point: pend

    });

    drawLine(pre, pend);

}

Javascript 相关文章推荐
Google韩国首页图标动画效果
Aug 26 Javascript
『jQuery』取指定url格式及分割函数应用
Apr 22 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
vue.js中实现登录控制的方法示例
Apr 23 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
JS eval代码快速解密实例解析
Apr 23 Javascript
使用js画图之圆、弧、扇形
Jan 12 #Javascript
js函数与php函数的区别实例浅析
Jan 12 #Javascript
使用JS画图之点、线、面
Jan 12 #Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 #Javascript
jQuery实现友好的轮播图片特效
Jan 12 #Javascript
js函数内变量的作用域分析
Jan 12 #Javascript
Jquery api 速查表分享
Jan 12 #Javascript
You might like
PHP中设置时区,记录日志文件的实现代码
2013/01/07 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
浅析php原型模式
2014/11/25 PHP
smarty表格换行实例
2014/12/15 PHP
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
jQuery的实例及必知重要的jQuery选择器详解
2016/05/20 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
Angular之toDoList的实现代码示例
2017/12/02 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
实现高性能javascript的注意事项
2019/05/27 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
使用python装饰器验证配置文件示例
2014/02/24 Python
Python中文字符串截取问题
2015/06/15 Python
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
python2.7的编码问题与解决方法
2016/10/04 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
Flask框架信号用法实例分析
2018/07/24 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
nohup的用法
2012/11/26 面试题
物理学专业求职信
2014/07/04 职场文书
办公室主任岗位职责
2015/01/31 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
海弦WR-800F
2022/04/05 无线电