用VML画正弦和余弦曲线

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<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>

​x
 
<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”函数为需要执行的程序主体

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...xxxxxxxxxx
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

用VML画正弦和余弦曲线

分类

网站常用

描述

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