使用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 相关文章推荐
this和执行上下文实现代码
Jul 01 Javascript
JS维吉尼亚密码算法实现代码
Nov 09 Javascript
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
使用jQuery.fn自定义jQuery翻页插件
Jan 20 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
vue实现百度搜索功能
Dec 28 Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 Javascript
前端canvas中物体边框和控制点的实现示例
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
基于mysql的bbs设计(三)
2006/10/09 PHP
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
Node.js中的事件驱动编程详解
2014/08/16 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
深入解析koa之异步回调处理
2019/06/17 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
Python实现12306火车票抢票系统
2019/07/04 Python
Python 线程池用法简单示例
2019/10/02 Python
python实现画循环圆
2019/11/23 Python
python dumps和loads区别详解
2020/02/04 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
采购员的工作职责
2013/12/26 职场文书
三年级数学教学反思
2014/01/31 职场文书
森林防火工作方案
2014/02/14 职场文书
合作经营协议书
2014/04/17 职场文书
我的中国梦演讲稿500字
2014/08/19 职场文书
上课不认真检讨书
2014/09/17 职场文书
房屋过户委托书范本
2014/10/07 职场文书
信访工作汇报材料
2014/10/27 职场文书
立项申请报告范本
2015/05/15 职场文书
生日祝酒词大全
2015/08/10 职场文书
深入浅析Django MTV模式
2021/09/04 Python
vue实现在data里引入相对路径
2022/06/05 Vue.js