使用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中执行任意html代码的方法示例解读
Dec 25 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
node.js中的fs.futimes方法使用说明
Dec 17 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
JS敏感词过滤代码
Dec 23 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
bootstrap Table的一些小操作
Nov 01 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
微信小程序实现日历签到
Sep 21 Javascript
详解nginx配置vue h5 history去除#号
Nov 09 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
咖啡的传说和历史
2021/03/03 新手入门
PHP 操作文件的一些FAQ总结
2009/02/12 PHP
浅析php变量修饰符static的使用
2013/06/28 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
JS获取select-option-text_value的方法
2013/12/26 Javascript
setInterval计时器不准的问题解决方法
2014/05/08 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
神经网络python源码分享
2017/12/15 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
django创建超级用户过程解析
2019/09/18 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
伦敦哈德森鞋:Hudson Shoes
2018/02/06 全球购物
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
WiFi云数码相框:Nixplay
2018/07/05 全球购物
语文教师个人工作总结
2015/02/06 职场文书
Pygame Time时间控制的具体使用详解
2021/11/17 Python
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers