JavaScript实现手动画线

 

在网上搜索了一些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> 

转载于:https://www.cnblogs.com/glacierh/archive/2008/08/08/1263591.html