VML一游戏类应用，赛车轨迹
在VML绘图中，当绘制shap的时候，网上普遍有个说法是通过调整CoordOrig可以调整坐标系的原点位置
可经过很多尝试以后依旧没有任何反应，当调整这个值的时候。
而且发现默认状态下，v:shape根本没有CoordOrig属性（null），后来终于发现，其实坐标系的调整是通过
改变CoordSize和shap本身的style.left/style.top来调整的。
一个width和height都是400的shape类型DOM，当绘制的内容超出范围的时候依然能够显示，没有任何影响。
所以，实际上原点始终在DOM的左上角，不同的是，我们的绘图区域可以超过DOM的左上角！！
CoordSize="400,-400" 的时候，表示DOM的右下角坐标是(400,-400), 而DOM的左上角始终是(0,0)
所以，就得到以后右为正的X轴和上为正的Y轴， 这时再进行绘图，就是以DOM的左上角为原点的一个常规数学坐标系。
下面是一则对line的小应用。经过改进的话可以做成一个简单的类似贪吃蛇的游戏。
使用键盘的左右键来调整方向，上下键调整速度
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title>画斜线</title>
<!--[if !mso]>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<![endif]-->
<style type="text/css">
body{padding:0px;margin:0px;}
#line{position:absolute;left:0;top:0;z-Index:3;}
</style>
</head>
<body>
<v:line id="line"></v:line>
<v:PolyLine id="pLine" filled="false" Points="0,0 0,100"></v:PolyLine>
<v:shape CoordOrig="100,100" CoordSize="200,200">
</v:shape>
<script language="javascript">
var line=document.getElementById("line");
line.to="0,0";
line.from="0,0";
with(line.stroke)
{
Color="#FF0000";
Weight="1px";
EndArrow="Classic";
DashStyle="LongDashDot";
}
line=document.getElementById("pLine");
line.style.position="absolute";
with(line.stroke)
{
Color="#000";
Weight="1px";
EndArrow="Classic";
DashStyle="Solid";
}
line.Points.value="10,10 100,100 200,300 400,500";
var html="10,10";
var direction=0;
var prePoint=[10,10];
var step=5;
function Move()
{
var x=step*Math.cos(direction);
var y=step*Math.sin(direction);
var p=prePoint;
p[0]+=x;
p[1]-=y;
p[0]=Math.round(p[0]);
p[1]=Math.round(p[1]);
if(p[0]>=0&&p[1]>=0&&step>0)
{
prePoint=p;
html+=" "+prePoint[0]+","+prePoint[1];
line.Points.value=html;
}
}
window.setInterval(Move,50);
function document_KeyDown(e)
{
var e=window.event;
if(e.keyCode==37)
direction+=0.1;
else if(e.keyCode==39)
direction-=0.1;
else if(e.keyCode==38)
step=Math.min(Math.max(step+1,1),15);
else if(e.keyCode==40)
step=Math.max(step-1,0);
}
document.onkeydown=document_KeyDown;
document.body.focus();
</script>
</body>
</html>
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office" lang="en">
<head>
<title>画斜线</title>
<!--[if !mso]>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<![endif]-->
<style type="text/css">
body{padding:0px;margin:0px;}
#line{position:absolute;left:0;top:0;z-Index:3;}
</style>
</head>
<body>
<v:line id="line"></v:line>
<v:PolyLine id="pLine" filled="false" Points="0,0 0,100"></v:PolyLine>
<v:shape CoordOrig="100,100" CoordSize="200,200">
</v:shape>
<script language="javascript">
var line=document.getElementById("line");
line.to="0,0";
line.from="0,0";
with(line.stroke)
{
Color="#FF0000";
Weight="1px";
EndArrow="Classic";
DashStyle="LongDashDot";
}
line=document.getElementById("pLine");
line.style.position="absolute";
with(line.stroke)
{
Color="#000";
Weight="1px";
EndArrow="Classic";
DashStyle="Solid";
}
line.Points.value="10,10 100,100 200,300 400,500";
var html="10,10";
var direction=0;
var prePoint=[10,10];
var step=5;
function Move()
{
var x=step*Math.cos(direction);
var y=step*Math.sin(direction);
var p=prePoint;
p[0]+=x;
p[1]-=y;
p[0]=Math.round(p[0]);
p[1]=Math.round(p[1]);
if(p[0]>=0&&p[1]>=0&&step>0)
{
prePoint=p;
html+=" "+prePoint[0]+","+prePoint[1];
line.Points.value=html;
}
}
window.setInterval(Move,50);
function document_KeyDown(e)
{
var e=window.event;
if(e.keyCode==37)
direction+=0.1;
else if(e.keyCode==39)
direction-=0.1;
else if(e.keyCode==38)
step=Math.min(Math.max(step+1,1),15);
else if(e.keyCode==40)
step=Math.max(step-1,0);
}
document.onkeydown=document_KeyDown;
document.body.focus();
</script>
</body>
</html>
来自BestEast的技术分享, JavaScript的奇思妙想, 抛砖引玉，希望能再激起哪位的好创意。
在一些图形应用上，VML极其之方便，但现如今日趋强大的非IE浏览器使得VML几近要退出历史舞台了。
在绘图的组建逻辑上，其实SVG和VML有不少共同之处，如果哪位牛人能够开发出一个兼容VML和SVG的客户端JS绘图组件……
