使用js画图之正弦曲线_javascript技巧
程序员文章站
2022-05-01 17:23:38
...
数学式:y=Asin(ωx+φ)+k
//画正弦曲线
//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 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 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);
}
样例: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 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 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函数整理
-
PHP小技巧之JS和CSS优化工具Minify的使用方法
-
Powershell小技巧之使用Jint引擎在PowerShell中执行Javascript函数
-
js对数字的格式化使用说明_javascript技巧
-
IE6中使用position导致页面变形的解决方案(js代码)_javascript技巧
-
使用js判断当前时区TimeZone是否是夏令时_javascript技巧
-
使用js解决由border属性引起的div宽度问题_javascript技巧
-
使用js操作css实现js改变背景图片示例_javascript技巧
-
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)_javascript技巧
-
js对象之JS入门之Array对象操作小结_javascript技巧