One of JS drawing geometry "Straight line"

JS drawing idea through the brain, feel a little meaning, so practice a. JS drawing for a series of articles, this is the point, line and polygon

First look at the sample: http://www.zhaojz.com.cn/demo/draw5.html

One, point

Here's the point we use the span tag to represent

//strokes, parameters are a bit of size, color, point coordinates and labels; obviously the opts parameter is an objectfunctionDrawpoint (opts) {document.write ("<span id= '" +opts.point[0]+ "" +opts.point[1]+ "' style= ' Display:inline-block; Width: "+opts.pw+" PX;Height:"+opts.ph+" PX;Background-color:"+opts.color+";Position:absolute"+opts.point[0]+" PX;Top:"+opts.point[1]+" PX; ' > "+(opts.point[2]? (" <div style= ' position:relative; ' ><span style= ' Position:absolute; left:5px; bottom:1px; Text-align:left; width:100px; ' > "+opts.point[2]+" </span></div> "):" ")+ "</span>");}

Several parameters:

OPTS.PW: The width of the point

opts.ph: The height of the point, generally equal to the OPTS.PW

Opts.color: Color of the dots

Opts.point: The position of the point, point[0]: horizontal position, point[1]: Vertical position point[2] is the label of the point

Note: The position attribute must be absolute;

Second, straight line

The line is made up of dots, so we're going to draw n multiple points between two points. Visually, it is a straight line.

//Draw Line//Pstart Beginnings//Pend End//opts ParametersfunctiondrawLine (Pstart, Pend, opts) {varph = 1; varPW = 1; varcolor = "Darkred"; if(opts) {color= Opts.color?Opts.color:color; }    varSlope//Slope    varNoslope =false;//whether there is a slope    varHdist = pend[0]-pstart[0]; varVdist = pend[1]-pstart[1]; if(Hdist! = 0) {slope= Math.Abs (vdist/hdist); Calculate slope}Else{Noslope=true;//the line has no slope when hdist=0    }    varGapP = PW > ph? PH:PW;//the distance between the default neighboring points (the pixels in the upper-left corner)        varDiagonal = Math.sqrt (Math.pow (hdist,2) + Math.pow (vdist,2));//Bevel Length    varPN = parseint (Diagonal/gapp); Calculates the number of points between two pointsif(PN < 3) {pn=pn*3+1};//if the number of points is less than 3, then increase the points; why +1, is to ensure that pn=0 at least one point    varVgap = Math.Abs (vdist)/pn; The vertical distance between adjacent two pointsvarHgap = Math.Abs (hdist)/pn; Horizontal distance between adjacent two points for(vari = 0; i< PN; i++){        //A stroke.        //Hgap horizontal distance between adjacent two points        //Vgap vertical distance between adjacent two points        //hgap*i* (pend[0]<pstart[0]?-1:1) * (noslope?0:1) Horizontal offset relative to starting point        //vgap*i* (pend[1]<pstart[1]?-1:1) vertical offset relative to the starting point        //(pend[0]<pstart[0]?-1:1) horizontal offset Direction        //(pend[1]<pstart[1]?-1:1) vertical offset direction        //(noslope?0:1) when there is no slope for a line, the horizontal offset is 0Drawpoint ({pw:pw, ph:ph, Color:color, point: [(Hgap*i* (pend[0]<pstart[0]?-1:1) * (noslope?0:1) +pstart[0]), (vgap*i* (pend[1]<pstart[1]?-1:1) +pstart[1])]        }); }}

Line and polygon can be drawn on the basis of the line:

Line:

//Fold Line//one-dimensional array of PS pointsfunctionDrawPolyline (PS) {if(PS) {//Draw Line         for(vari = 0; i<ps.length-1; i++) {drawLine (ps[i], ps[i+1]); }        //Stroke inflection point         for(vari = 0; i<ps.length; i++{drawpoint ({PW):3, Ph:3, Color:' RED ', Point:ps[i]}); }            }}

Polygon:

//Polygon//one-dimensional array of PS pointsfunctionDrawPolygon (PS) {if(PS) {//Draw Line         for(vari = 0; i<ps.length-1; i++) {drawLine (ps[i], ps[i+1]); }        //make closed        if(Ps.length > 2) {drawLine (ps[ps.length-1], Ps[0])        }        //Stroke inflection point         for(vari = 0; i<ps.length; i++{drawpoint ({PW):3, Ph:3, Color:' RED ', Point:ps[i]}); }    }}

Rectangular:

//Draw a rectangle//Lefttop The position of the point in the upper left corner//Width width//HighfunctionDrawRectangle (lefttop, width, high) {DrawPolygon ([Lefttop, [lefttop[0], lefttop[1]+High ], [lefttop[0]+width, lefttop[1]+High ], [lefttop[0]+width, lefttop[1]]    ]); //Fill    //document.write ("<span style= ' Height:" + (high-1) + "PX; Width: "+ (width-1) +" PX; Background-color: "+" Green "+"; Position:absolute; Left: "+ (lefttop[0]+1) +" PX; Top: "+ (lefttop[1]+1) +" ' ></span> ");}

One of JS drawing geometry "Straight line"