使用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 XML数据显示为HTML一例
Dec 23 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
php 广告调用类代码(支持Flash调用)
2011/08/11 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
DHTML Slide Show script图片轮换
2008/03/03 Javascript
子窗体与父窗体传值示例js代码
2013/08/01 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
JavaScript中使用Callback控制流程介绍
2015/03/16 Javascript
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
Python下的twisted框架入门指引
2015/04/15 Python
Python随机读取文件实现实例
2017/05/25 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
Python 3.7新功能之dataclass装饰器详解
2018/04/21 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
同程旅游英文网站:LY.com
2018/11/13 全球购物
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
Collection和Collections的区别
2016/05/02 面试题
销售自我评价
2013/10/22 职场文书
后勤采购员岗位职责
2013/12/19 职场文书
入党积极分子自我鉴定
2014/02/18 职场文书
追悼会主持词
2014/03/20 职场文书
农村葬礼主持词
2014/03/31 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
爱的承诺书
2015/01/20 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
CSS基础详解
2021/10/16 HTML / CSS