javascript画线、区域问题？急！求大家了!

<HTML>
<HEAD>
<TITLE>画线－www.51windows.Net</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META NAME="Author" CONTENT="www.Redidea.net">
</HEAD>
<body bgcolor=#CCCCCC>
<script>
var winW= 480;
var winH= 360;
var MyStr="<object id=DDraw classid=\"clsid:369303C2-D7AC-11d0-89D5-00A0C90833E6\"";
MyStr+=" style=\"background:#FFFFFF;position:absolute;left:0;top:0;width:";
MyStr+=winW;
MyStr+=";height:";
MyStr+=winH;
MyStr+="\"></object>";
document.write(MyStr);
</script>
<script language=JavaScript>
var IsClick=0;
var MouseX0=0;
var MouseY0=0;
function MyDraw(){
if (IsClick) {
if ((MouseX0==0)&&(MouseY0==0)){
MouseX0=event.clientX-winW/2;
MouseY0=event.clientY-winH/2;
}
MouseX=event.clientX-winW/2;
MouseY=event.clientY-winH/2;
var Canvas=DDraw.DrawSurface;
var Lib=DDraw.Library;
Canvas.FillColor(Lib.red);
Canvas.Line(MouseX0,MouseY0,MouseX,MouseY);
DDraw.DrawSurface=Canvas;
MouseX0=MouseX;
MouseY0=MouseY;
}
}function MyClick(){
IsClick=!IsClick;
MouseX0=event.clientX-winW/2;
MouseY0=event.clientY-winH/2;
}document.onclick=MyClick;
document.onmousemove=MyDraw;
</script>
<div style="position:absolute;left:0;top:380;">点一下鼠标，然后松开，移动鼠标，就可以画了，再点一下，就结束了..:)<br>郭卫东</div>
</body>
</HTML>

解决方案 »

  1.   

    <html>
    <head>
    <title> 鼠标选取框 </title>
    <script language="JavaScript">
    var x0;
    var y0;
    var select=false;function document.onmousedown()
    {
        x0=document.body.scrollLeft+event.clientX;// 鼠标起始横坐标
        y0=document.body.scrollTop+event.clientY;// 鼠标起始纵坐标
        select=true;
    }function document.onmouseup()
    {
        select=false;
    }function document.onselectstart()
    {
        return false;
    }function document.ondrag()
    {
        return false;
    }function document.onmousemove()
    {
        if (select)
        {
            dd.style.display='';// 如果鼠标已经正确移动，将层设置为可视。
            if(document.body.scrollLeft+event.clientX-x0>0) // 从左向右
            {
                dd.style.left=x0;
                dd.style.width=document.body.scrollLeft+event.clientX-x0;
            }
            else // 从右向左
            {
                dd.style.left=document.body.scrollLeft+event.clientX;
                dd.style.width=x0-(document.body.scrollLeft+event.clientX);
            }
            if (document.body.scrollTop+event.clientY-y0>0)// 从上向下
            {
                dd.style.top=y0;
                dd.style.height=document.body.scrollTop+event.clientY-y0;
            }
            else// 从下向上
            {
                dd.style.top=document.body.scrollTop+event.clientY;
                dd.style.height=y0-(document.body.scrollTop+event.clientY);
            }
        }
    }
    </script>
    </head><body>
    <table id="dd" style="position:absolute; width:0px; height:0px; z-index:99; border:1px black dashed; display:none;"><tr><td></td></tr></table>
    </body>
    </html>
      

  2.   

    <html xmlns:v="urn:schemas-microsoft-com:vml">
    <STYLE>
    v\:* { Behavior: url(#default#VML) }
    </STYLE>
    <head>
    <script>
    document.onmousedown = doMouseDown;
    document.onmousemove = doMouseMove;
    document.onmouseup = doMouseUp;
    var x = 0;
    var y = 0;
    var oldx = 0;
    var oldy = 0;
    var size = 1;
    var color = "red";
    var mousedown = false;
    var html = "";
    function doMouseDown(){
     if(event.button==1){
        mousedown = true;
        x = event.x ;
        y = event.y;
     }
    }
    function doMouseMove(){
     if(event.button==1&&mousedown==true){ 
        paint();
     }
    }
    function doMouseUp(){
     mousedown = false;
    }
    function paint(){
     // if(event.button==1&&mousedown==true){
     oldx = x;
     oldy = y;
      x = event.x-5;
      y = event.y-5;
    // alert(oldx+","+oldy+","+x+","+y);
      html = event.srcElement.innerHTML;
      var h = "";
      h += "<v:line style='position:absoult;' from='"+oldx+","+oldy+"' to='"+x+","+y+"' />";
    //  h += "<v:line style='position:relative' from='0,0' to='100,0' >";
     // h += "<v:stroke dashstyle='Solid'/>";
     // h += "</v:line>";
      event.srcElement.innerHTML = html+h;
    //  event.srcElement.innerHTML = html;
    //  document.write("<v:line style='position:relative' from='"+x+","+y+"' to='"+x+","+y+"' >");
    //  document.write("<v:line style='position:relative' from='0,0' to='0,100' >");
    //  document.write("<v:stroke dashstyle='Solid'/>");
    //  document.write("</v:line>");
    //}
    }
    </script>
    </head>
    <body>
    </body>
    </html>