<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>Untitled1</title>
<styletype="text/css">
.style1{
font-size:x-small;
}
</style>
<scripttype="text/javascript">
/**
画点
*/
functionmakedot(x,y){
pointDiv="<divstyle='height:1px;position:absolute;left:"+x+
"px;top:"+y+"px;width:1px;background:#f00;overflow:hidden'></div>";
returnpointDiv;
}
/**
根据两点坐标画直线。
*/
functionline(x1,y1,x2,y2){
varslope;//斜率
vardirection;//坐标运动方向
vartx=x2-x1;
varty=y2-y1;
if(tx==0&&ty==0)return;
varpoints="";
varaxis;//坐标轴上的坐标
if(Math.abs(tx)>=Math.abs(ty)){//在x轴上移动
direction=tx>0?1:-1;
tx=Math.abs(tx);
slope=ty/tx;
axis=x1;
for(i=0;i<tx;i++){
points+=makedot(axis,y1+i*slope);
axis+=direction;
}
}else{//在y轴上移动
direction=ty>0?1:-1;
ty=Math.abs(ty);
slope=tx/ty;
axis=y1;
for(i=0;i<ty;i++){
points+=makedot(x1+i*slope,axis);
axis+=direction;
}
}
varcontainer=document.getElementById("container");
container.innerHTML+=points;
}
varoldPoint=null;
//获取鼠标位置
functionmousePosition(ev){
ev=ev||window.event;
if(ev.pageX||ev.pageY){
return{x:ev.pageX,y:ev.pageY};
}
vardoc=document.documentElement,body=document.body;
varpageX=event.clientX+(doc&&doc.scrollLeft||body&&body.scrollLeft||0)-(doc&&doc.clientLeft||body&&body.clientLeft||0);
varpageY=event.clientY+(doc&&doc.scrollTop||body&&body.scrollTop||0)-(doc&&doc.clientTop||body&&body.clientTop||0);
return{x:pageX,y:pageY};
}
functionrecordPoint(ev){
varpoint=mousePosition(ev);
if(oldPoint!=null){
line(oldPoint.x,oldPoint.y,point.x,point.y);
}
oldPoint=point;
}
</script>
</head>
<body>
<divid="container"style="width:1000px;height:600px;border:1px#bfbfbfsolid;"onclick="recordPoint(event);">
</div>
<scripttype="text/javascript">
//line(19,19,22,300);
</script>
</body>
</html>
