使用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 相关文章推荐
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
Bootstrap每天必学之简单入门
Nov 19 Javascript
JavaScript原型及原型链终极详解
Jan 04 Javascript
js实时获取窗口大小变化的实例代码
Nov 18 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
vue文件树组件使用详解
Mar 29 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
vue项目上传Github预览的实现示例
Nov 06 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
详解TS数字分隔符和更严格的类属性检查
May 06 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 透明水印生成代码
2012/08/27 PHP
JavaScript的漂亮的代码片段
2013/06/05 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
javascript+html5实现绘制圆环的方法
2015/07/28 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
jQuery EasyUI window窗口使用实例代码
2017/12/25 jQuery
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
Python中的choice()方法使用详解
2015/05/15 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
python计算两个地址之间的距离方法
2018/06/09 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
MADE法国:提供原创设计师家具
2018/09/18 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
元旦获奖感言
2014/03/08 职场文书
收款委托书范本
2014/09/11 职场文书
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers