VML可控箭头
<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>
Tip:
方向键左右控制方向,上下控制快慢