JavaScript 图形学

如果 JavaScript 能实现此功能 , 将会使图片的使用量大量减少 , 加快页面完全下载速度 .

解决方案 »

  1.   

    Javascript根本不提供WEB页绘图功能，如果客户端使用的是Windows操作系统，则推荐使用DirectAnimation控件来画图，因为Windows操作系统中均已含有此控件而不需要下载。
      

  2.   

    应该有一些技巧吧 , 比如 :
    function Box(X1,Y1,X2,Y2,Color)
    {
      var Width = X2 - X1 ;
      var Height = Y2 - Y1 ;
      write('<DIV style = "font-size:0;border:0;background:'+Color+';left:'+X1+';top:'+Y1+';width:'+Width+';height:'+Height+'">&nbsp;</DIV>') ;
      return ;
    }
    也可以用来画横线及竖线 , 难道就没有画斜线和曲线的技巧了吗 ?
    我一直相信有 .
      

  3.   

    karma(无为) 大师 , 能不能解释一下 SVG & VML , 并做一下示范 ?
      

  4.   

    1. Drawing a line using Javascript and table:
    <html>
    <head>
    <style type="text/css">
    TD {width:1; height:1}
    </style>
    </head>
    <body>
    <table id="tbl" cellspacing="0" cellpadding="0" border="0">
    <script language="javascript">
    for (var i=0; i < 50; i++)
    {
      document.write ("<tr>");
      for (var j=0; j < 50; j++)
    document.write("<td></td>");
      document.write ("</tr>");
    }
    </script>
    </table>
    <script language="javascript">
    for (var i=0; i < 50; i++)
    {
      tbl.rows[49-i].cells[i].style.backgroundColor="red";
    }
    </script>
    </body>
    </html>2. Drawing a circle with SVG (you need to save it as a file with file extensin as .svg and a SVG viewer to see it):
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
              "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">
    <svg width="500" height="500">
       <ellipse cx="301" cy="286" rx="149" ry="151" style="stroke-width:20;
                stroke-opacity:1;stroke:rgb(0,0,0);fill-opacity:1;
                fill:rgb(255,255,0);opacity:1"/>
      </svg>3. Drawing a polyline with VML:
    <html xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
    <style>
    v\:* { behavior: url(#default#VML); }
    </style>
    </head>
    <body>
    <v:polyline points = "18pt,54pt,90pt,-9pt,180pt,63pt,261pt,27pt" strokecolor = "red" strokeweight = 
    "2pt">
    </v:polyline>
    </body>
    </html> 
      

  5.   

    谢谢 , 似乎 JavaScript 也只能这样了 .