-js2d a set of functions with JavaScript drawing
Last Update:2017-02-28
Source: Internet
Author: User
javascript|js| function <script language= "javascript" ><br/>
/****************** js2d set of functions *******************<br/>
<br/>
Author: Neweroica 2003-3-28<br/>
<br/>
CopyRight (C) 2003<br/>
<br/>
Please keep this copyright information when quoting or reprint, thank you!!! <br/>
<br/>
This function set can be stored separately as a JS file: "Js2d.js" <br/>
<br/>
/<br/>
<br/>
/************* to draw **************<br/>.
The screen coordinates (pixels) of the x,y point <br/>
Color color (string value) <br/>
Size (pixel) <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/>
/************* draw a straight line **************<br/>
The screen coordinates (pixels) of the x1,y1 starting point <br/>
The screen coordinates (pixels) of the x2,y2 endpoint <br/>
Color color (string value) <br/>
Size (pixel) <br/>
Style style <br/>
=0 Solid line <br/>
=1 Dashed <br/>
=2 Virtual 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/>
var Theta=math.atan ((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,y1+i*dy,color,size); <br/>
Break;<br/>
Case 1:<br/>
I+=size*2;<br/>
Drawdot (x1+i*dx,y1+i*dy,color,size); <br/>
Break;<br/>
Case 2:<br/>
if (Math.floor (i/4/size)%2==0) {<br/>
Drawdot (x1+i*dx,y1+i*dy,color,size); <br/>
}<br/>
Else{<br/>
I+=size*2;<br/>
Drawdot (x1+i*dx,y1+i*dy,color,size); <br/>
}<br/>
Break;<br/>
Default:<br/>
Drawdot (x1+i*dx,y1+i*dy,color,size); <br/>
Break;<br/>
}<br/>
}<br/>
}<br/>
<br/>
/************* draw a solid rectangular **************<br/>
The screen coordinates (pixels) of the x1,y1 starting point (the upper-left corner of the rectangle) <br/>
The screen coordinates (pixels) of the x2,y2 endpoint (the lower-right corner of the rectangle) <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/>
/************* Draw Rectangular **************<br/>
The screen coordinates (pixels) of the x1,y1 starting point (the upper-left corner of the rectangle) <br/>
The screen coordinates (pixels) of the x2,y2 endpoint (the lower-right corner of the rectangle) <br/>
Color color (string value) <br/>
Size (pixel) <br/>
Style style <br/>
=0 Solid line <br/>
=1 Dashed <br/>
=2 Virtual 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/>
/************* painted oval **************<br/>
The screen coordinates (pixels) of the X,y center <br/>
Length of a,b and short axes (pixels) <br/>
Color color (string value) <br/>
Size (pixel) <br/>
Precision Edge Fine degree <br/>
/<br/>
function DrawOval (x,y,a,b,color,size,precision) {<br/>
var i;<br/>
var imax=2*math.pi;<br/>
var step=2*math.pi/(precision*math.sqrt (a*b) *4.5); <br/>
for (i=0;i<imax;i+=step) {<br/>
Drawdot (X+a*math.cos (i), Y+b*math.sin (i), color,size); <br/>
}<br/>
}<br/>
<br/>
/************* Draw Polygon **************<br/>
The screen coordinates (pixels) of the X,y center <br/>
R Polygon circumcircle radius (pixel) <br/>
The number of edges of n-polygons <br/>
Color color (string value) <br/>
Size (pixel) <br/>
Style style <br/>
=0 Solid line <br/>
=1 Dashed <br/>
=2 Virtual line <br/>
/<br/>
function Drawpoly (x,y,r,n,color,size,style) {<br/>
var i;<br/>
var theta=math.pi;<br/>
var x1=x,y1=y-r,x2,y2;<br/>
for (i=0;i<n;i++) {<br/>
theta-= (2*math.pi/n); <br/>
X2=x+r*math.sin (theta); <br/>
Y2=y+r*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>