用VML畫正弦和余弦曲線

2024-09-05 12:17:56

字體：大中小

供稿：網(wǎng)友

用VML在網(wǎng)頁上畫正弦和余弦曲線，這里使用polyLine和arrow兩個(gè)函數(shù)分別畫折線和箭頭，兩個(gè)基本的元素繪畫完成，整條曲線也就很容易的就出現(xiàn)了。

<html xmlns:v><head><meta http-equiv="content-type" content="text/html; charset=GB2312" /><title>用VML畫正弦和余弦曲線</title><style>* { font-size:12px; font-family:宋體, Arial; } /*規(guī)定了所有的字體樣式*/body { overflow:auto; padding:0px; margin:0px; }v/:* { BEHAVIOR:url(#default#VML); }</style><script>//全局變量，用于記錄窗口客戶區(qū)的尺寸var xx, x0, x1, yy, y0, y1;//“print”函數(shù)用于輸出HTML到頁面中function print(str){ document.write(str); }//“main”函數(shù)為需要執(zhí)行的程序主體function main(){    //獲取窗口客戶區(qū)的尺寸    xx = document.documentElement.offsetWidth/2;    x0 = document.documentElement.offsetWidth/8;    x1 = document.documentElement.offsetWidth*7/8;    yy = document.documentElement.offsetHeight/2;    y0 = document.documentElement.offsetHeight/6;    y1 = document.documentElement.offsetHeight*5/6;    //畫橫坐標(biāo)    arrow([x0-50, yy], [x1+50, yy]);    //畫縱坐標(biāo)    arrow([xx, y1+20], [xx, y0-20]);    //畫正弦函數(shù)圖像    map(sin, x0, x1);    //畫余弦函數(shù)圖像    map(cos, x0, x1);    }//根據(jù)指定的函數(shù)和定義域畫出函數(shù)圖像function map(fn, min_x, max_x, step){    var parameters;    parameters = new Array();    min_x = min_x || 0;    max_x = max_x || document.body.offsetWidth;    step = step || 1;    for(var i=min_x; i<max_x; i+=step){        parameters.push(i+","+fn(i));    }    polyLine(parameters);}//函數(shù)“polyLine”用于畫折線function polyLine(parameters){    var str;    str = "<v:PolyLine Filled=/"false/" Points=/"" + parameters.join(" ")+"/"><//v:PolyLine>";    print(str);}//函數(shù)“arrow”用于畫箭頭function arrow(start, end){    var str;    str = "<v:line from=/""+start+"/" to=/""+end+"/"><v:stroke endarrow=/"Classic/" //><//v:line>"    print(str);}//正弦函數(shù)function sin(x){ return(Math.sin((x-xx)/25)*(y1-yy)+yy); }//余弦函數(shù)function cos(x){ return(Math.cos((x-xx)/25)*(y1-yy)+yy); }</script></head><body><script>    main();</script></body></html>

上一篇：JavaScript DNA動(dòng)態(tài)序列比對(duì)代碼

下一篇：網(wǎng)頁上的收藏夾及分享功能代碼