使用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 相关文章推荐
javascript的offset、client、scroll使用方法详解
Dec 25 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 Javascript
js关于精确计算和数值格式化以及直接引js文件
Jan 28 Javascript
jQuery中$.each()函数的用法引申实例
May 12 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
如何根据业务封装自己的功能组件
Apr 19 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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 Google的translate API代码
2008/12/10 PHP
记录mysql性能查询过程的使用方法
2013/05/02 PHP
php preg_replace替换实例讲解
2013/11/04 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
javascript学习网址备忘
2007/05/29 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
nodejs npm包管理的配置方法及常用命令介绍
2014/06/05 NodeJs
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
Spring mvc 接收json对象
2015/12/10 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
详解如何理解vue的key属性
2019/04/14 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
python中的协程深入理解
2019/06/10 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
小学新教师培训方案
2014/02/03 职场文书
领班岗位职责范文
2014/02/06 职场文书
购房意向书范本
2014/04/01 职场文书
竞聘自述材料
2014/08/25 职场文书
小学假期安全广播稿
2014/09/28 职场文书
致接力运动员加油稿
2015/07/21 职场文书
2016年感恩节寄语
2015/12/07 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
python中tkinter复选框使用操作
2021/11/11 Python
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis