VML绘制正弦和余弦曲线效果

发布时间：2018-09-07 18:15:09 所属栏目：交互来源：站长网

导读：用VML在网页上画正弦和余弦曲线，这里使用polyLine和arrow两个函数分别画折线和箭头，两个基本的元素绘画完成，整条曲线也就很容易的就出现了。关于VML的百科介绍：http://baike.liehuo.net/doc-view-8894.html 文章回顾：利用VML在网页上绘制一幅逼真的

　　用VML在网页上画正弦和余弦曲线，这里使用polyLine和arrow两个函数分别画折线和箭头，两个基本的元素绘画完成，整条曲线也就很容易的就出现了。

　　关于VML的百科介绍：http://baike.liehuo.net/doc-view-8894.html

　　文章回顾：

　　利用VML在网页上绘制一幅逼真的梅花图

　　网页演示：点击此处

　　运行演示：

<html xmlns:v> <head> <meta http-equiv="content-type" content="text/html; charset=GB2312" /> <title>用VML画正弦和余弦曲线 - Liehuo.Net</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><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：辽源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!