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

发布时间：2018-09-01 14:57:35 所属栏目：运营来源：站长网

导读：用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>
提醒：可修改儿女码再运行!

（编辑：河北网）

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

OPPO概念机泄露，5000	华为找到了让手机支持
Redmi K50 Pro屏幕升级	天玑8100电竞旗舰仅要