canvas教程

JavaScript 图形学

字号+ 作者:H5之家 来源:H5之家 2015-11-18 10:20 我要评论( )

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

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

      

  • 应该有一些技巧吧 , 比如 :
    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 ;
    }
    也可以用来画横线及竖线 , 难道就没有画斜线和曲线的技巧了吗 ?
    我一直相信有 .

      

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

      

  • 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> 

      

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

      

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • html5canvas核心技术图形、动画与游戏开发源码

      html5canvas核心技术图形、动画与游戏开发源码

      2017-05-02 17:42

    • canvas的神奇用法 javascript技巧笔记 CFEI.NET

      canvas的神奇用法 javascript技巧笔记 CFEI.NET

      2017-04-30 12:00

    • 学习笔记:HTML5 Canvas绘制简单图形

      学习笔记:HTML5 Canvas绘制简单图形

      2017-04-27 13:03

    • 在Android中需要通过graphics类来显示2D图形

      在Android中需要通过graphics类来显示2D图形

      2017-04-27 11:00

    网友点评