在網上搜尋了一些JavaScript畫線的代碼，綜合了幾個例子，作了一些修改和整合，實現了畫線的功能，但是只是很簡單的功能，只能實現單擊畫線，雙擊結束，由於本人初學JS，還不知道怎麼實現撤消，及清除。頁面代碼如下：
<html xmlns:v="http://www.eglic.com/">
<head>
<title>頁面畫線</title>
<meta name="ContentType" content="text/html" />
<meta name="CharSet" content="GB2312" />
<script language="javascript">
var Working=false;
var points = [];
var lastPoint = {x:0,y:0};
var line = null;
document.ondblclick=function (){
if(!Working) return;
points = [];
lastPoint = {x:0,y:0}
Working=false;
}
document.onclick=function (){
if(!Working){
Working=true;
}
var s='<v:line from="'+event.x+','+event.y+'" to="'+event.x+','+event.y+'" style="position:absolute;left:0px;top:0px;"></v:line>';
lastPoint.x = event.x;
lastPoint.y = event.y;
points.push( {x:event.x,y:event.y} );
document.getElementById("show").innerHTML = "X:"+ event.x + " Y:" + event.y;
document.getElementById("show").style.display="";
var o=document.createElement(s);
document.body.insertAdjacentElement('BeforeEnd',o);
line = o;
}
document.onmousemove=function (){
if(!Working) return;
line.to = event.x + "," + event.y;
document.getElementById("dshow").innerHTML = "X:"+ event.x + " Y:" + event.y;
document.getElementById("dshow").style.display="";
}
</script>
<style type="text/css">
v\:* {behavior:url(#default#VML);}
</style>
</head>
<body>
<div id="show" style="border:5px solid #000;width:200px;height:30px;line-height:30px;text-align:center;display:none">
</div>
<div id="dshow" style="border:5px solid #000;width:200px;height:30px;line-height:30px;text-align:center;display:none">
</div>
</body>
</html>
