使用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 相关文章推荐
5种处理js跨域问题方法汇总
Dec 04 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
ES6 class的应用实例分析
Jun 27 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
ES6中Set和Map用法实例详解
Mar 02 Javascript
微信小程序实现星星评分效果
Nov 01 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
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
利用javascript查看html源文件
2006/11/08 Javascript
一个对于js this关键字的问题
2007/01/09 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
p5.js入门教程之键盘交互
2018/03/19 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
如何封装Vue Element的table表格组件
2021/02/06 Vue.js
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
Python的爬虫包Beautiful Soup中用正则表达式来搜索
2016/01/20 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
python得到windows自启动列表的方法
2018/10/14 Python
python3对接mysql数据库实例详解
2019/04/30 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
python实现PID算法及测试的例子
2019/08/08 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
Java语言程序设计测试题判断题部分
2013/01/06 面试题
三爱活动实施方案
2014/03/19 职场文书
党员志愿者活动总结
2014/06/26 职场文书
升学宴学生致辞
2015/07/27 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers