Using JS to draw points, lines, and surfaces_javascript skills-JS Tutorial-php.cn

Using JS to draw points, lines, and surfaces_javascript skills

WBOY

Release： 2016-05-16 16:20:55

Original

1512 people have browsed it

When the idea of JS drawing came to my mind, I thought it was interesting, so I put it into practice. JS drawing is a series of articles, originally about points, lines and surfaces

Look at the sample first: http://www.zhaojz.com.cn/demo/draw5.html

1. Point

We use the span tag to represent the points here

Copy code The code is as follows:

//Draw points, the parameters are the size, color, coordinates and label of the point; obviously the opts parameter is an object 

function drawPoint(opts){

document.write("" (opts.point[2 ]?("" opts .point[2] "
"):"") "");

}

Several parameters:

opts.pw: point width

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

opts.color: point color

　opts.point: represents 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;

2. Straight line

A straight line is composed of points, so we need to draw n points between two points. Visually, it is a straight line.

Copy code The code is as follows:

//Draw line

//pstart starting point

//pend end point

//opts parameters

function drawLine(pstart, pend, opts){

var ph = 1;

var pw = 1;

var color = "DarkRed";

If(opts){

         color = opts.color ? opts.color: color;

}

var slope; //Slope

var noSlope = false; //Is there a slope

var hdist = pend[0] - pstart[0];

var vdist = pend[1] - pstart[1];

If(hdist != 0){

        slope = Math.abs(vdist/hdist); //Calculate slope

}else{

         noSlope = true; //When hdist=0, the straight line has no slope

}

var gapp = pw > ph ? ph : pw; //Default distance between adjacent points (pixels in the upper left corner) 

var diagonal = Math.sqrt(Math.pow(hdist,2) Math.pow(vdist,2)); //Hypotenuse length

var pn = parseInt(diagonal/gapp); //Calculate the number of points between two points

If(pn < 3){pn=pn*3 1}; //If the number of points is less than 3, increase the number of points; why 1, it is to ensure that there is at least one point 
 when pn=0
var vgap = Math.abs(vdist)/pn; //Vertical distance between two adjacent points

var hgap = Math.abs(hdist)/pn; //Horizontal distance between two adjacent points

for(var i = 0; i< pn ; i ){

                                                                                                                                                                ality
​​​​ //hgap The horizontal distance between two adjacent points

​​​​ //vgap The vertical distance between two adjacent points

​​​​ //hgap*i*(pend[0]
​​​​ //vgap*i*(pend[1]
//(pend[0]
//(pend[1]
​​​​ //(noSlope?0:1) When the straight line has no slope, the horizontal offset is 0

        drawPoint({

             pw: pw,

ph: ph,

             color: color,

point: [(hgap*i*(pend[0]
        });

}

}

Polylines and surfaces can be drawn based on lines:

Polyline:

Copy code The code is as follows:

//Polyline
//ps one-dimensional array of points
function drawPolyline(ps){
If(ps){
//Draw a line
for(var i = 0; i              drawLine(ps[i], ps[i 1]);
}
//Draw the inflection point
for(var i = 0; i              drawPoint({
                 pw: 3,
ph: 3,
                  color: 'RED',
Point: ps[i]
            });
}

}
}

Polygon:

Copy code The code is as follows:

//Polygon

//ps one-dimensional array of points

function drawPolygon(ps){

If(ps){

//Draw a line

for(var i = 0; i
             drawLine(ps[i], ps[i 1]);

}

​​​​ //Close

If(ps.length > 2){

             drawLine(ps[ps.length-1], ps[0])

}

​​​​ //Draw the inflection point

for(var i = 0; i
             drawPoint({

                 pw: 3,

ph: 3,

                  color: 'RED',

Point: ps[i]

            });

}

}

}

Rectangle:

Copy code The code is as follows:

//Draw a rectangle

//leftTop The position of the upper left corner point

//width width

//high high

function drawRectangle(leftTop, width, high){

drawPolygon([

          leftTop,

         [leftTop[0], leftTop[1] high],

         [leftTop[0] width, leftTop[1] high],

[leftTop[0] width, leftTop[1]]

]);

//Padding

//document.write("");

}

It turns out that JS can also do such cool things, I really need to study it carefully