Introduction to Graphics and implementation code _ javascript skills

Today, we need to draw a graph on the web page, think of JS, learn, and search online, and sort and optimize the following code. Note that we use pure js instead of HTML5 canvas, you can refer to the following code to draw a graph on the web page, think of JS, learn, and search online, note that not HTML5 canvas, but pure js

The Code is as follows:

/* The following painting points, draw lines, and draw circles do not use HTML5 canvas, but use pure js.
Some Mathematical trigonometric functions are used.
The following code is written randomly in the classroom without further optimization.
*/
/*
Object-oriented encapsulation, adding and drawing rectangles
Further code optimization
*/
Var Graphics = function (pId, color ){
This. pId = pId;
This. color = color; // '#000000' or 'black'
This. drawPoint = function (x, y ){
// Draw point
Var oDiv = document. createElement ('P ');
ODiv. style. position = 'absolute ';
ODiv. style. height = '2px ';
ODiv. style. width = '2px ';
ODiv. style. backgroundColor = this. color;
ODiv. style. left = x + 'px ';
ODiv. style. top = y + 'px ';
// Document. body. appendChild (oDiv );
Return oDiv; // Note: The returned value is a dom node but is not appended to the document.
};
This. drawLine = function (x1, y1, x2, y2 ){
// Draw a line segment. (X1, y1), (x2, y2) are the start and end points of a line segment.
Var x = x2-x1; // width
Var y = y2-y1; // high
Var frag = document. createDocumentFragment ();
If (Math. abs (y)> Math. abs (x) {// The side is longer. Use the side to draw points (that is, the cycle below). If this is not the case, it cannot be drawn when it is a vertical line or a horizontal line.
If (y> 0) // This is the case when you draw a line.
For (var I = 0; I Var width = x/y * I // x/y is the ratio of the two sides of the right angle. Based on this ratio, the position of the new coordinate is obtained.
{

Frag. appendChild (drawPoint (width + x1, I + y1 ));
}
}
If (y <0) {// sometimes draws a line backwards
For (var I = 0; I> y; I --){
Var width = x/y * I
{
Frag. appendChild (drawPoint (width + x1, I + y1 ));
}
}
}
} // End if
Else {

If (x> 0) // This is the case when you draw a line.
For (var I = 0; I Var height = y/x * I
{

Frag. appendChild (drawPoint (I + x1, height + y1 ));
}
}
If (x <0) {// sometimes draws a line backwards
For (var I = 0; I> x; I --){
Var height = y/x * I
{
Frag. appendChild (this. drawPoint (I + x1, height + y1 ));
}
}
} // End if

}
Document. getElementById (this. pId). appendChild (frag );
};
This. drawCircle = function (r, x, y ){
// Draw a circle. X, abscissa of the origin; y, ordinate of the origin; r, radius
Var frag = document. createDocumentFragment ();
For (var degree = 0; degree <360; degree ++ = 2 ){
Var x1 = r * Math. sin (degree * Math. PI/180 );
Var y1 = r * Math. cos (degree * Math. PI/180 );
Frag. appendChild (drawPoint (x + x1, y + y1 ));
}
Document. body. appendChild (frag );
};
This. dragCircle = function (x1, y1, x2, y2 ){
// Drag a circle
Var r = Math. sqrt (x2-x1) * (x2-x1) + (y2-y1) * (y2-y1); // obtain the square of the oblique side of the long right triangle with a radius = the sum of the square of the two straight edges

Var frag = document. createDocumentFragment ();
For (var degree = 0; degree <360; degree ++ = 2) {// draw a vertex every two degrees.
Var x2 = r * Math. sin (degree * Math. PI/180 );
Var y2 = r * Math. cos (degree * Math. PI/180 );
Frag. appendChild (drawPoint (x1 + x2, y1 + y2 ));
}
Document. getElementById (this. pId). appendChild (frag );
};
This. drawRect = function (startX, startY, lengthX, lengthY, newId, text ){
// (StartX, startY) Start coordinate, lengthX, long lengthY, wide newId, newly created p Id text, p content
Var myDiv = document. createElement ('P ');
If (newId ){
MyDiv. id = newId;
}
MyDiv. style. width = lengthX + 'px ';
MyDiv. style. height = lengthY + 'px ';
MyDiv. style. backgroundColor = this. color;
MyDiv. style. left = startX + 'px ';
MyDiv. style. top = startY + 'px ';
MyDiv. style. textAlign = 'center ';
If (text ){
MyDiv. innerHTML = text;
}
Document. getElementById (this. pId). appendChild (myDiv );
};
};

Window. onload = function (){
Var g = new Graphics ('p1', 'red ');
G. drawLine (, 30 );
G. color = '# CDC9C9 ';
G. drawRect (200,200, '', 'test ');
}