JS在屏幕上画点、线、矩形、多边形如何实现？

<HTML xmlns:v ="urn:schemas-microsoft-com:vml">
<head>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE>v\:* {
BEHAVIOR: url(#default#VML)
}
</STYLE>
</head>
<body>
<v:PolyLine filled="false" Points="0,0 0,100 20,150 200,100" style="position:relative"/>
</body>
</html>

解决方案 »

  1.   

    http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
      

  2.   

    层的效率很低，还是用vml。装svg插件的话，也可以用svg
      

  3.   

    <!-- 本页特效由素人家园（http://030313.org）网上搜集，可以免费转载使用，如果注明了作者，请保留原作者信息，谢谢使用！-->
    <!-- 以下是head部分！-->
    <script language=javascript> 
      <!-- 
       //第几次点击 
       var c = 0; 
       function MyDraw(colors) 
       { 
        //计算坐标使用 
        //var x = document.DDraw.style.pixelWidth/2; 
      //  var y = document.DDraw.style.pixelHeight/2;     //准备绘图,启用画板 
        var Canvas=DDraw.DrawSurface; 
        //启用DirectAnimation库 
        var Lib=DDraw.Library; 
        //边框颜色 
        Canvas.BorderColor(Lib.black); 
    var colors= eval(colors); 
      //  switch (c) 
      //  { 
       //  case 0: 
        //  Canvas.FillColor(colors); 
        //  break; 
       //  case 1: 
       //   Canvas.FillColor(Lib.green); 
       //   break; 
      //   case 2: 
      //    Canvas.FillColor(Lib.blue); 
      //    break; 
       //  default: 
       //   Canvas.FillColor(Lib.black); 
      //  } 
      //  c++; 
        //定义字体 
        Canvas.Font("宋体", 44, true, false, false, false); 
        //写字 
       // Canvas.Text("Hello World!",100,0); 
        //画线 
       // Canvas.Line(-x, 0, x, 0); 
       // Canvas.Line(0, -y, 0, y*4/5); 
        //矩形 
       // Canvas.rect(-50,-50,100,100); 
        //圆形 
        Canvas.oval(0,0,100,100); 
        //保存图形，用途不详 
       // Canvas.SaveGraphicsState(); 
        //旋转 
        //Canvas.transform(Lib.rotate2rate(1)); 
        //停止旋转 
        //Canvas.RestoreGraphicsState(); 
        //返回画好的图形 
        DDraw.DrawSurface=Canvas; 
       } 
        
      // document.onload=MyDraw;   //--> 
      </script> <!-- 本页特效由素人家园（http://030313.org）网上搜集，可以免费转载使用，如果注明了作者，请保留原作者信息，谢谢使用！-->
    <!-- 以下是body部分！-->   <body bgcolor=#CCCCCC> 
      <OBJECT id=DDraw STYLE="BACKGROUND: #ffffff; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%" classid=clsid:369303C2-D7AC-11d0-89D5-00A0C90833E6 VIEWASTEXT> 
       <PARAM NAME="SourceURL" value=""> 
       <PARAM NAME="CoordinateSystem" value="0"> 
       <PARAM NAME="MouseEventsEnabled" value="0"> 
       <PARAM NAME="HighQuality" value="0"> 
       <PARAM NAME="PreserveAspectRatio" value="-1"> 
      </OBJECT> 
    <script language=javascript>
    document.onload=MyDraw("Canvas.FillColor(Lib.red);"); 
    </script>
      

  4.   


    <input type="image" name="img1" id="img1" src="work.jpg" >
     
    <div id="MyDiv" style="position:absolute; width:0px; height:0px; z-index:99; border:1px RED Solid; display:none;">
     
    </div>
     <script >
    var x0;
    var y0;
    var tag=false;
    var newID=1;
    img1.onmousedown = function Conmousedown()
    {
        x0=document.body.scrollLeft+event.clientX;// 鼠标起始横坐标
        y0=document.body.scrollTop+event.clientY;// 鼠标起始纵坐标
        tag=true;
    }function document.onmouseup()
    {
     var HTML= MyDiv.outerHTML ;
     HTML=HTML.replace("MyDiv","newDiv"+newID);
     newID++;
    document.body.insertAdjacentHTML("beforeEnd",HTML); 
        tag=false;
    } 
    img1.ondragstart = function  dontDrag()
    {
        return false;
    }
    img1.onmousemove=function  Conmousemove() 
    {
       if (tag)
        {
            MyDiv.style.display='';// 如果鼠标正移，可见。
            if(document.body.scrollLeft+event.clientX-x0>0) // 从左向右
            {
                MyDiv.style.left=x0;
         
                MyDiv.style.width=Math.abs( document.body.scrollLeft+event.clientX-x0-2);
            }
            else // 从右向左
            {
                MyDiv.style.left=document.body.scrollLeft+event.clientX;
                MyDiv.style.width=Math.abs( x0-(document.body.scrollLeft+event.clientX));
            }
            if (document.body.scrollTop+event.clientY-y0>0)// 从上向下
            {
                MyDiv.style.top=y0;
                MyDiv.style.height=Math.abs( document.body.scrollTop+event.clientY-y0);
            }
            else// 从下向上
            {
                MyDiv.style.top=document.body.scrollTop+event.clientY;
                MyDiv.style.height=y0-(document.body.scrollTop+event.clientY);
            }
        }
    }
    </script>