使用js画图之正弦曲线
更新时间:2015年01月12日 15:29:36 投稿:hebedich
这篇文章主要介绍了使用js绘制几何图形的方法的系列文章,本文主要讲诉正弦曲线的绘制方法,需要的朋友可以参考下
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
数学式: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 style对象与CurrentStyle对象案例详解
这篇文章主要介绍了JavaScript style对象与CurrentStyle对象案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-08-08HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
这篇文章主要介绍了HTML5游戏引擎LTweenLite实现的超帅动画效果,详细分析了LTweenLite的下载,动画效果的实现步骤,并附带完整的demo实例源码供读者下载,需要的朋友可以参考下2016-01-01基于JS实现html中placeholder属性提示文字效果示例
这篇文章主要介绍了基于JS实现html中placeholder属性提示文字效果,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2018-04-04
最新评论