-js2d a set of functions with JavaScript drawing

Source: Internet
Author: User
Tags cos functions sin
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>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.