我已经实现的点击画线的功能，大家进来看下，但是希望能够在图层之上也能画线，请帮忙解决！多谢！

<html>
<head>
<title>JavaScript点击鼠标画直线</title>
<script language="JavaScript">
function drawDot(x,y,color,size){
print("<table border='0' cellspacing=0 cellpadding=0><tr><td style='position: absolute; left: "+(x)+"; top: "+(y)+";background-color: "+color+"' width="+size+" height="+size+"></td></tr></table>")
}
function drawLine(x1,y1,x2,y2,color,size,style){
var i;
var r=Math.floor(Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1)));
var theta=Math.atan((x2-x1)/(y2-y1));
if(((y2-y1)<0&&(x2-x1)>0)||((y2-y1)<0&&(x2-x1)<0))
theta=Math.PI+theta;
var dx=Math.sin(theta);//alert(dx)
var dy=Math.cos(theta);
for(i=0;i<r;i++){
switch(style){
case 0:
drawDot(x1+i*dx,y1+i*dy,color,size);
break;
case 1:
i+=size*2;
drawDot(x1+i*dx,y1+i*dy,color,size);
break;
case 2:
if(Math.floor(i/4/size)%2==0){
drawDot(x1+i*dx,y1+i*dy,color,size);
}
else{
i+=size*2;
drawDot(x1+i*dx,y1+i*dy,color,size);
}
break;
default:
drawDot(x1+i*dx,y1+i*dy,color,size);
break;
}
}
}
function print(str) {
body.insertAdjacentHTML("AfterBegin",str)
}
//////////////////////////以下为鼠标拖动画直线
var BDraw=false;
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
document.onclick=BPoint
function BPoint(){
if(!BDraw){//几数次点击鼠标，记录初始点位置
BDraw=true;
x1 = event.x;
y1 = event.y;
drawDot(x1,y1,"red",5);
}else{//偶数次点击鼠标，画出直线
BDraw=false;
x2 = event.x;
y2 = event.y;
drawLine(x1,y1,x2,y2,"#0000cc",2,0);
}
}
</script>
</head><body id="body">
<DIV style="BORDER-RIGHT: black thick solid; BORDER-TOP: black thick solid; DISPLAY: inline; Z-INDEX: 103; LEFT: 416px; BORDER-LEFT: black thick solid; WIDTH: 344px; BORDER-BOTTOM: black thick solid; POSITION: absolute; TOP: 112px; HEIGHT: 112px;">Label<br>adsf<br>adsf<br>asdfsdafd</DIV>
</body>
</html> 

解决方案 »

  1.   

    如果你只用于IE浏览器的话可以用VML
    参考：
    <HTML xmlns:v><STYLE>v\:*{behavior:url(#default#VML);}</STYLE>
    <HEAD>
    </HEAD>
    <BODY onload="" onmousemove="move()" onmousedown="down()"  topmargin=0 leftmargin=0>
    <div id="div1" width="1200" height="780">
    </div>
    <script language="javascript">
    var x=0,y=0;
    var lastX=-1,lastY=-1;
    var isDrawing =false;
    function down() {
    var theButton= 0;
    theButton =window.event.button;
    if (theButton == 2) {
    isDrawing = false;

    return false;
    }
    var x=event.clientX;
    var y=event.clientY;

    if (!isDrawing) {
    div1.innerHTML = "";
    } isDrawing = true;

    lastX = x;
    lastY = y;
    //alert(lastX);

    div1.innerHTML +='<v:line style="Z-INDEX:1;POSITION:absolute;"></v:line>';
    } function move() {
    var x=event.clientX;
    var y=event.clientY;
    var vLine = div1.lastChild; if (isDrawing) {
    vLine.to = lastX + "," + lastY;
    vLine.from = x + "," + y;
    }
    }

    //alert(document.body.clientWidth + '宽：' +  document.body.clientHeight);
    function clientContextMenu(){
    window.event.returnValue = false;
    } document.oncontextmenu = clientContextMenu;
    </script></BODY>
    </HTML>