Javascript tips for drawing points, lines, and surfaces using JS

This article mainly introduces the basics of using js to draw geometric images, such as points, lines, and surfaces. if you need a friend, you may feel a little interesting when following the idea of JS drawing through the brain, so I tried it. JS plotting is a series of articles, which are about points, lines, and surfaces.

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

I. Point

Here we use the span label to represent the vertex

The code is as follows:

// Stroke, the parameter has a bit of size, color, coordinate and label of the vertex. Obviously, the opts parameter is an object.
Function drawPoint (opts ){
Document. write ("" + (opts. point [2]? ("

"+ Opts. point [2] +"

"):" ") + "");
}

Parameters:

Opts. pw: the width of the vertex.

Opts. ph: the height of the point, which is generally equal to opts. pw.

Opts. color: the color of the vertex.

Opts. point: indicates the point position. point [0]: horizontal, point [1]: vertical point [2] is the point label.

Note: The position attribute must be absolute;

II. straight line

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

The code is as follows:

// Draw a line
// Start point of pstart
// Pend endpoint
// 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; // whether the slope exists
Var hdist = pend [0]-pstart [0];
Var vdist = pend [1]-pstart [1];
If (hdist! = 0 ){
Slope = Math. abs (vdist/hdist); // calculates the slope.
} Else {
NoSlope = true; // when hdist = 0, the straight line has no slope
}
Var gapp = pw> ph? Ph: pw; // Default distance between neighboring points (pixels in the upper left corner)

Var diagonal = Math. sqrt (Math. pow (hdist, 2) + Math. pow (vdist, 2); // oblique edge 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, is to ensure that pn = 0 to a few points
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 ++ ){
// Stroke
// Horizontal distance between two adjacent points of hgap
// Vertical distance between two adjacent points in vgap
// Hgap * I * (pend [0] // Vgap * I * (pend [1] // (Pend [0] // (Pend [1] // (NoSlope? ) When the straight line has no slope, the horizontal offset is 0
DrawPoint ({
Pw: pw,
Ph: ph,
Color: color,
Point: [(hgap * I * (pend [0] });
}
}

Line and surface can be drawn on the basis of online:

Line:

The code is as follows:

// Line
// One-dimensional array of ps points
Function drawPolyline (ps ){
If (ps ){
// Draw a line
For (var I = 0; I DrawLine (ps [I], ps [I + 1]);
}
// Draw inflection point
For (var I = 0; I DrawPoint ({
Pw: 3,
Ph: 3,
Color: 'red ',
Point: ps [I]
});
}

}
}

Polygon:

The code is as follows:

// Polygon
// One-dimensional array of ps 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 inflection point
For (var I = 0; I DrawPoint ({
Pw: 3,
Ph: 3,
Color: 'red ',
Point: ps [I]
});
}
}
}

Rectangle:

The code is as follows:

// Draw a rectangle
// The position of the point in the upper left corner of leftTop
// Width
// High
Function drawRectangle (leftTop, width, high ){
DrawPolygon ([
LeftTop,
[LeftTop [0], leftTop [1] + high],
[LeftTop [0] + width, leftTop [1] + high],
[LeftTop [0] + width, leftTop [1]
]);
// Fill
// Document. write ("");
}

It turns out that JS can also do such a cool thing, so we really need to study it well.