When the idea of JS drawing passed through my brain, I felt it was interesting, so I practiced it. JS drawings are a series of articles, which are originally about points, lines and surfaces
Let’s look at the example first: http://www.zhaojz.com.cn/demo/draw5.html
a little
We use the span tag to indicate the point here
The code copy is as follows:
//Scan the point, the size, color, coordinates and labels of the point; it is obvious that the opts parameter is an object
function drawPoint(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 is generally equal to opts.pw
opts.color: The color of the dots
opts.point: indicates 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 more than n points between two points. Visually, it is a straight line.
The code copy is as follows:
//Draw lines
//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 the slope
}else{
noSlope = true; //When hdist=0, the straight line has no slope
}
var gapp = pw > ph ? ph : pw; //The distance between default adjacent points (pixel points in the upper left corner)
var diagonal = Math.sqrt(Math.pow(hdist,2) + Math.pow(vdist,2)); //The length of the hypotenuse
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 there is at least one point when pn=0
var vgap = Math.abs(vdist)/pn; //The 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++){
//Draw points
//hgap Horizontal distance between two adjacent points
//vgap Vertical distance between two adjacent points
//hgap*i*(pend[0]<pstart[0]?-1:1)*(noSlope?0:1) Horizontal offset from the starting point
//vgap*i*(pend[1]<pstart[1]?-1:1) Vertical offset from 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 the straight line has no slope, the horizontal offset is 0
drawPoint({
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])]
});
}
}
You can draw polylines and surfaces based on the online:
Polyline:
The code copy is as follows:
//Polyline
//Ps one-dimensional array of points
function drawPolyline(ps){
if(ps){
//Draw lines
for(var i = 0; i<ps.length-1; i++){
drawLine(ps[i], ps[i+1]);
}
//Turn the turning point
for(var i = 0; i<ps.length; i++){
drawPoint({
pw: 3,
ph: 3,
color: 'RED',
point: ps[i]
});
}
}
}
Polygons:
The code copy is as follows:
//Polygon
//Ps one-dimensional array of points
function drawPolygon(ps){
if(ps){
//Draw lines
for(var i = 0; i<ps.length-1; i++){
drawLine(ps[i], ps[i+1]);
}
//Change closed
if(ps.length > 2){
drawLine(ps[ps.length-1], ps[0])
}
//Turn the turning point
for(var i = 0; i<ps.length; i++){
drawPoint({
pw: 3,
ph: 3,
color: 'RED',
point: ps[i]
});
}
}
}
rectangle:
The code copy is as follows:
//Draw a rectangle
//leftTop The position of the point in the upper left corner
//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]]
]);
//filling
//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>");
}
It turns out that JS can do such cool things, it really needs to be studied carefully