用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动态序列比对代码

下一篇：网页上的收藏夹及分享功能代码

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注