用VML畫正弦和余弦曲線

2024-09-05 12:17:56

字體：大中小

來源：轉載

供稿：網友

用VML在網頁上畫正弦和余弦曲線，這里使用polyLine和arrow兩個函數分別畫折線和箭頭，兩個基本的元素繪畫完成，整條曲線也就很容易的就出現了。

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

上一篇：JavaScript DNA動態序列比對代碼

下一篇：網頁上的收藏夾及分享功能代碼

學習交流

如何查找有故障的配件

如何查找有故障的配件...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注