JavaScript with graphics - JS2D Function Set

Posted by john
10/7/2007
Related Tags:
css javascript 

  <script Language="javascript"> <br /> 
  /****************** JS2D Function Set *******************< br /> 
  <br /> 
  Author: neweroica 2003-3-28 <br /> 
  <br /> 
  CopyRight (C) 2003 <br /> 
  <br /> 
  Or reproduced in applying, please retain this copyright information, Thank you! <Br /> 
  <br /> 
  This function sets can be kept as a separate document js: "JS2D.js" <br /> 
  <br /> 
  ************************************************** * / <br /> 
  <br /> 
  /************* Painting point **************< br /> 
  X, y coordinates of points where the screen (pixels) <br /> 
  Color color (string value) <br /> 
  size size (pixels) <br /> 
  **********************************/< Br /> 
  Function drawDot (x, y, color, size) (<br /> 
  Document.write ( "<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> ") <br /> 
  ) <br /> 
  <br /> 
  /************* Painting straight **************< br /> 
  X1, y1 starting point where the screen coordinates (pixels) <br /> 
  X2, y2 end of the screen coordinates (pixels) <br /> 
  Color color (string value) <br /> 
  Size size (pixels) <br /> 
  Style style <br /> 
  = 0 solid line <br /> 
  = 1 dotted <br /> 
  = 2 strength line <br /> 
  **********************************/< Br /> 
  Function drawLine (x1, y1, x2, y2, color, size, style) (<br /> 
  Var i; <br /> 
  Var r = Math.floor (Math.sqrt ((x2-x1) * (x2-x1) (y2-y1) * (y2-y1 )));< br /> 
  Math.atan var theta = ((x2-x1) / (y2-y1)); <br /> 
  If (((y2-y1) <0 & & (x2-x1)> 0 )||(( y2-y1) <0 & & (x2-x1) <0)) <br /> 
  Theta = Math.PI theta; <br /> 
  Var dx = Math.sin (theta) / / alert (dx) <br /> 
  Var dy = Math.cos (theta); <br /> 
  For (i = 0; i <r; i) (<br /> 
  Switch (style) (<br /> 
  Case 0: <br /> 
  DrawDot (x1 i * dx, dy * y1 i, color, size); <br /> 
  Break; <br /> 
  Case 1: <br /> 
  I = size * 2; <br /> 
  DrawDot (x1 i * dx, dy * y1 i, color, size); <br /> 
  Break; <br /> 
  Case 2: <br /> 
  If (Math.floor (i/4/size)% 2 == 0) (<br /> 
  DrawDot (x1 i * dx, dy * y1 i, color, size); <br /> 
  ) <br /> 
  Else (<br /> 
  I = size * 2; <br /> 
  DrawDot (x1 i * dx, dy * y1 i, color, size); <br /> 
  ) <br /> 
  Break; <br /> 
  Default: <br /> 
  DrawDot (x1 i * dx, dy * y1 i, color, size); <br /> 
  Break; <br /> 
  ) <br /> 
  ) <br /> 
  ) <br /> 
  <br /> 
  /************* Solid rectangular painting **************< br /> 
  X1, y1 starting point (rectangular upper left) of the screen coordinates (pixels) <br /> 
  X2, y2 end (rectangular lower right corner) where the screen coordinates (pixels) <br /> 
  Color color (string value) <br /> 
  **********************************/< Br /> 
  Function drawFilledRect (x1, y1, x2, y2, color) (<br /> 
  Document.write ( "<table border='0' cellspacing=0 cellpadding=0> <tr> <td style = 'position: absolute; left:" (x1) "; top:" (y1) "; background-color : "color" 'width = "(x2-x1)" height = "(y2-y1)"> </ td> </ tr> </ table> ") <br /> 
  ) <br /> 
  <br /> 
  /************* Painted rectangular **************< br /> 
  X1, y1 starting point (rectangular upper left) of the screen coordinates (pixels) <br /> 
  X2, y2 end (rectangular lower right corner) where the screen coordinates (pixels) <br /> 
  Color color (string value) <br /> 
  Size size (pixels) <br /> 
  Style style <br /> 
  = 0 solid line <br /> 
  = 1 dotted <br /> 
  = 2 strength line <br /> 
  **********************************/< Br /> 
  Function drawRect (x1, y1, x2, y2, color, size, style) (<br /> 
  DrawLine (x1, y1, x2, y1, color, size, style); <br /> 
  DrawLine (x1, y2, x2, y2, color, size, style); <br /> 
  DrawLine (x1, y1, x1, y2, color, size, style); <br /> 
  DrawLine (x2, y1, x2, y2, color, size, style); <br /> 
  ) <br /> 
  <br /> 
  /************* Oval painting **************< br /> 
  X, y centre of the screen coordinates (pixels) <br /> 
  A, b the length of the long axis and short axis (pixels) <br /> 
  Color color (string value) <br /> 
  Size size (pixels) <br /> 
  Fine edge precision of <br /> 
  **********************************/< Br /> 
  Function drawOval (x, y, a, b, color, size, precision) (<br /> 
  Var i; <br /> 
  Var iMax = 2 * Math.PI; <br /> 
  Var step Math.PI = 2 * / (* Math.sqrt precision (a * b) * 4.5); <br /> 
  For (i = 0; i <iMax; i = step) (<br /> 
  DrawDot (xa * Math.cos (i), yb * Math.sin (i), color, size); <br /> 
  ) <br /> 
  ) <br /> 
  <br /> 
  /************* Painting polygon **************< br /> 
  X, y centre of the screen coordinates (pixels) <br /> 
  Polygon circumcircle radius r (pixels) <br /> 
  N polygon edges <br /> 
  Color color (string value) <br /> 
  Size size (pixels) <br /> 
  Style style <br /> 
  = 0 solid line <br /> 
  = 1 dotted <br /> 
  = 2 strength line <br /> 
  **********************************/< Br /> 
  Function drawPoly (x, y, r, n, color, size, style) (<br /> 
  Var i; <br /> 
  Var theta = Math.PI; <br /> 
  X = var x1, y1 = yr, x2, y2; <br /> 
  For (i = 0; i <n; i) (<br /> 
  Theta-= (2 * Math.PI / n); <br /> 
  * X2 = xr Math.sin (theta); <br /> 
  Y2 = yr * Math.cos (theta); <br /> 
  DrawLine (x1, y1, x2, y2, color, size, style); <br /> 
  X1 = x2; <br /> 
  Y1 = y2; / / alert (x1 "" y1) <br /> 
  ) <br /> 
  ) <br /> 
  </ Script> <br /> 
  <br /> 
  <br /> 
  <script> <br /> 
  //****************** JS2D Function Set Example *******************< br /> 
  DrawLine (20,20,300,20, "# 0000cc," 2,0); <br /> 
  DrawLine (20,40,300,40, "# 0000cc," 2,1); <br /> 
  DrawLine (20,60,300,60, "# 0000cc", 2,2); <br /> 
  DrawFilledRect (20,80,300,200, "009900"); <br /> 
  DrawRect (20,220,220,320, "ff0000", 2,0); <br /> 
  DrawRect (240,220,440,320, "ff0000", 2,1); <br /> 
  DrawRect (460,220,660,320, "ff0000", 2,2); <br /> 
  DrawOval (250,450,120,50, "006600", 1,1); <br /> 
  DrawOval (250,650,120,120, "006600", 2,0.5); <br /> 
  DrawPoly (200,900,100,3, "ff8800", 2,0); <br /> 
  DrawPoly (400,900,100,4, "ff8800", 2,1); <br /> 
  DrawPoly (600,900,100,5, "ff8800", 2,2); <br /> 
  DrawPoly (200,1100,100,6, "ff8800", 2,0); <br /> 
  DrawPoly (400,1100,100,7, "ff8800", 2,1); <br /> 
  DrawPoly (600,1100,100,12, "ff8800", 2,2); <br /> 
  </ Script> 

Related articles:

Use Dreamweaver to create placeholders Fireworks document
  Image placeholder Dreamweaver allows users to designated places in the future Fireworks image size and position, will enable us to create the website before the final picture to try a variety of page layout, which will Fireworks and Dreamweaver features integrated use of the play the powerfu...
Popularity creation of a meaningful link (the link)
  Original: Dan Thies    Compiler: Karen    So far, there are many site administrators only know that link popularity (the link) is a high-ranking search engine was a crucial factor.    But you know what, some links not only to upgrade the ranking of a Web site ...
Flash water in the formation of ideas and methods
  Many friends on the effect of water a soft spot for the formation of water - in fact, because of a surface wave refraction so that the localities, which appeared wave of migration, there are good articles Guide stresses and how to wave refraction, but may it is more difficult, because it inv...
Junior JavaScript tutorials (3)
  JavaScript scripting language is a basic component from the control statements, functions, objects, methods, properties, and so on, to achieve programming.    First, a controlled flow in any language, the process control flow is a must, it makes the whole process reduce confusion, ...
Javascript - css Cascading Style Sheets
  Kuba men, Kuba, not crimes ~~~~~~~, today, I cried, cried a psychological some really depressed, pressure Tingda. Nowhere release. Really too tired, too painful, I feel that My life until now, the living is a failure. Alexander the Great, I liked the phrase: "I came, I suffered, I succe...