Using JavaScript drawing--js2d function set _javascript technique

<script language= "JavaScript" >/****************** js2d set of functions ******************* Author: Neweroica 2003-3-28 Copyright (C) 2003 when quoting or reprint, please retain this information, thank you!!! This function set can be stored separately as a JS file: "Js2d.js" ***************************************************//************* Draw point ************** x, The screen coordinate (pixel) color (string value) size (pixel) of the Y-point **********************************/function Drawdot (X,y,color, Size) {document.write ("<table border= ' 0 ' cellspacing=0 cellpadding=0><tr><td + (x) +"; Top: "+ (Y) +"; Background-color: "+color+" "width=" +size+ "height=" +size+ "></td></tr></table>")}/********** Draw a line ************** x1,y1 the screen coordinates (pixels) where the starting point x2,y2 the end of the screen coordinates (pixels) color (string value) size (pixel) style Style =0 solid line =1 dashed =2 imaginary line **********************************/function DrawLine (x1 , Y1,x2,y2,color,size,style) {var i; var R=math.floor (math.sqrt (x2-x1) * (x2-x1) + (y2-y1) * (y2-y1));var Theta=math.atan ((x2-x1)/(y2-y1)); if ((y2-y1) <0&& (x2-x1) >0) | | ((y2-y1) <0&& (x2-x1) <0)) Theta=math.pi+theta; var dx=math.sin (theta);//alert (DX) var dy=math.cos (theta); for (i=0;i<r;i++) {switch (style) {case 0:drawdot (x1+i*dx,y1+i*dy,color,size); Break Case 1:i+=size*2; Drawdot (x1+i*dx,y1+i*dy,color,size); Break Case 2:if (Math.floor (i/4/size)%2==0) {Drawdot (x1+i*dx,y1+i*dy,color,size); } else{i+=size*2; Drawdot (x1+i*dx,y1+i*dy,color,size); } break; Default:drawdot (x1+i*dx,y1+i*dy,color,size); Break The screen coordinates (pixel) of the screen coordinates (pixels) x2,y2 The end point (pixel) of a solid rectangle ************** x1,y1 starting point (upper-left corner of the rectangle)/************* the color Color (string value) **********************************/function Drawfilledrect (x1,y1,x2,y2,color) {document.write ("<table Border= ' 0 ' cellSpacing=0 CELLPADDING=0&GT;&LT;TR&GT;&LT;TD + (x1) + "; Top: "+ (y1) +"; Background-color: "+color+" ' width= ' + (x2-x1) + "height=" + (y2-y1) + "></td></tr></" Table> ")}/************* the screen coordinates (pixels) of the screen coordinate (pixel) x2,y2 where the rectangle ************** x1,y1 Start (the upper-left corner of the rectangle) is located (Pixel) Colo R color (string value) size (pixel) style =0 solid line =1 dashed =2 virtual line *************** /function DrawRect (x1,y1,x2,y2,color,size,style) {drawLine (X1,y1,x2,y1,color,size,style); DrawLine (X1,y2,x2,y2,color,size,style); DrawLine (X1,y1,x1,y2,color,size,style); DrawLine (X2,y1,x2,y2,color,size,style); /************* Draw Ellipse ************** x,y Center in screen coordinates (pixels) a,b Length (pixels) of long axis and short axis color color (string value) Size size (pixel) precision edge fineness **********************************/function DrawOval (x,y,a,b,color,size,precisi ON) {var i; var Imax=2*math.pi; var step=2*math.pi/(precision*math.sqrt (a*b) *4.5); for (i=0;i&Lt;imax;i+=step) {Drawdot (X+a*math.cos (i), Y+b*math.sin (i), color,size); }/************* Draw Polygon ************** x,y Center of screen coordinates (pixels) r Polygon circumcircle radius (pixel) n polygon edge number color colors (string value) size (pixel) style =0 solid line =1 dashed =2 virtual line ********************* /function Drawpoly (x,y,r,n,color,size,style) {var i; var Theta=math.pi; var x1=x,y1=y-r,x2,y2; for (i=0;i<n;i++) {theta-= (2*math.pi/n); X2=x+r*math.sin (theta); Y2=y+r*math.cos (theta); DrawLine (X1,y1,x2,y2,color,size,style); x1=x2; Y1=y2;//alert (x1+ "+y1)}} </script> <script>//****************** js2d function Set Example ******************* DrawLine (20,20,300,20, "#0000cc", 2,0); DrawLine (20,40,300,40, "#0000cc", 2, 1); DrawLine (20,60,300,60, "#0000cc", 2,2); Drawfilledrect (20,80,300,200, "009900"); DrawRect (20,220,220,320, "ff0000", 2,0); DrawRect (240,220,440,320, "ff0000", 2, 1); DrawRect (460,220,660,320, "ff0000 ", 2,2); DrawOval (250,450,120,50, "006600", 1, 1); DrawOval (250,650,120,120, "006600", 2,0.5); Drawpoly (200,900,100,3, "ff8800", 2,0); Drawpoly (400,900,100,4, "ff8800", 2, 1); Drawpoly (600,900,100,5, "ff8800", 2,2); Drawpoly (200,1100,100,6, "ff8800", 2,0); Drawpoly (400,1100,100,7, "ff8800", 2, 1); Drawpoly (600,1100,100,12, "ff8800", 2,2); </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]