使用js畫圖之正弦曲線
更新時間:2015年01月12日 15:29:36 投稿:hebedich
這篇文章主要介紹了使用js繪制幾何圖形的方法的系列文章,本文主要講訴正弦曲線的繪制方法,需要的朋友可以參考下
數(shù)學式:y=Asin(ωx+φ)+k
樣例:http://www.zhaojz.com.cn/demo/draw7.html
JS函數(shù)的聲明:
復制代碼 代碼如下:
//畫正弦曲線
//dot 原點
//amplitude 振幅 -- A
//initialPhase 初相 -- φ
//setover 偏距 -- k
//palstance 角速度 -- ω
//len 周期數(shù)
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);
}
相關(guān)文章
JS this關(guān)鍵字在ajax中使用出現(xiàn)問題解決方案
這篇文章主要介紹了JS this關(guān)鍵字在ajax中使用出現(xiàn)問題解決方案,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
JavaScript面向?qū)ο蟪绦蛟O(shè)計中對象的定義和繼承詳解
這篇文章主要介紹了JavaScript面向?qū)ο蟪绦蛟O(shè)計中對象的定義和繼承,結(jié)合實例形式詳細分析了javascript面向?qū)ο蟪绦蛟O(shè)計中對象定義、繼承、屬性、方法、深拷貝等相關(guān)概念與操作技巧,需要的朋友可以參考下2019-07-07
JS動態(tài)修改iframe內(nèi)嵌網(wǎng)頁地址的方法
這篇文章主要介紹了JS動態(tài)修改iframe內(nèi)嵌網(wǎng)頁地址的方法,涉及javascript動態(tài)修改iframe中src屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
webpack 開發(fā)和生產(chǎn)并行設(shè)置的方法
這篇文章主要介紹了webpack 開發(fā)和生產(chǎn)并行設(shè)置的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-11-11

