Using JS to draw points, lines, and surfaces_javascript skills

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 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                                                                                                                                                                 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