Pure JS Web Board (Graphics) class introduction and implementation code _JAVASCRIPT skills

Today need to draw a map on the Web page, think of using JS, after learning, and online search, after finishing optimization to get the following code, attention is not used HTML5 canvas, but with the pure JS

Copy Code code as follows:

/* The following points, draw lines, draw a circle of methods, are not used HTML5 canvas, but with the pure JS
Used some mathematical trigonometric function methods.
The following code is randomly written in the classroom and does not do more optimization
*/
/*
Object-oriented encapsulation, adding drawing rectangles
Further refine the code
*/
var Graphics = function (divID, color) {
This.divid = divID;
This.color = color; ' #000000 ' or ' black '
this.drawpoint= function (x,y) {
Draw a Point
var odiv=document.createelement (' div ');
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 value returned is a DOM node, but is not appended to the document
};
This.drawline = function (x1,y1,x2,y2) {
A method of drawing a line segment. (X1,y1), (X2,y2) is the starting point of the line segment, respectively
var x=x2-x1;//wide
var y=y2-y1;//high
var frag=document.createdocumentfragment ();
if (Math.Abs (y) >math.abs (x)) {//That side is longer, use that to do the drawing point (that is, the loop below), if not, when it is a vertical or horizontal line, it will not draw
if (y>0)//The drawing line is like this
for (Var i=0;i<y;i++) {
var width=x/y*i//x/y is the ratio of two sides of the right angle, according to this ratio, to find the location of the new coordinates
{

Frag.appendchild (Drawpoint (width+x1,i+y1));
}
}
if (y<0) {//Sometimes the line is inverted.
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)//The drawing line is like this
for (Var i=0;i<x;i++) {
var height=y/x*i
{

Frag.appendchild (Drawpoint (i+x1,height+y1));
}
}
if (x<0) {//Sometimes the line is inverted.
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.divid). appendchild (Frag);
};
This.drawcircle = function (r, x, y) {
Draw a circle. X, the origin horizontal axis; Y, the Origin ordinate; 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) {
Pull out a circle to
var r=math.sqrt ((x2-x1) * (x2-x1) + (y2-y1) * (Y2-Y1))//Find the square of the hypotenuse in a long right-angled triangle with a radius = the sum of the squares of two straight edges

var frag=document.createdocumentfragment ();
for (Var degree=0;degree<360;degree+=2) {///every 2 degrees, draw a point
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.divid). appendchild (Frag);
};
This.drawrect = function (StartX, Starty, Lengthx, lengthy, newId, text) {
(StartX, Starty) start coordinates, LENGTHX, long lengthy, wide newId, newly created div ID text,div content
var mydiv=document.createelement (' div ');
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.divid). appendchild (Mydiv);
};
};

Window.onload=function () {
var g = new Graphics (' Div1 ', ' red ');
G.drawline (500,30,0,30);
G.color = ' #CDC9C9 ';
G.drawrect (10,10,200,200, ', ' test ');
}