Pure js web page drawing board (Graphics) class introduction and implementation code_javascript skills

Today I need to draw a map on a web page. I thought of using JS. After studying and searching online, I got the following code after sorting and optimizing it. Note that it is not using HTML5 canvas, but pure js

Copy code The code is as follows:

/* The following methods of drawing points, lines and circles are not using HTML5 canvas, but It is made of pure js
Some mathematical trigonometric function methods are used
The following code is randomly written in class, without any further optimization
*/
/*
Object-oriented encapsulation, add Draw a rectangle
Further optimize the code
*/
var Graphics = function(divId, color){
this.divId = divId;
this.color = color; //'#000000' or 'black'
this.drawPoint= function(x,y){
//Draw 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 returned value is a dom Node, but not appended to the document
};
this.drawLine = function(x1,y1,x2,y2){
//Method to draw a line segment. (x1, y1), (x2, y2) are the starting point and end point of the line segment respectively
var x=x2-x1;//width
var y=y2-y1;//height
var frag=document .createDocumentFragment();
if(Math.abs(y)>Math.abs(x)){//Which side is longer, use that side as the basis for drawing points (that is the loop below), if Otherwise, when it is a vertical or horizontal line, it will not be drawn
if(y>0)//Drawing the line is like this
for(var i=0;ivar width=x/y*i //x/y is the ratio of the lengths of the two sides of the right angle. Based on this ratio, find the position of the new coordinates
{

frag.appendChild (drawPoint(width x1,i y1));
}
}
if(y<0){//Sometimes the line is drawn 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)//Drawing the line is like this
for(var i=0;ivar height=y/x*i
{

frag.appendChild(drawPoint(i x1,height y1));
}
}
if (x<0){//Sometimes the line is drawn 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 .divId).appendChild(frag);
};
this.drawCircle = function(r, x, y){
//Draw a circle. x, abscissa of origin; y, ordinate of 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 Draw a circle
var r=Math.sqrt((x2-x1)*(x2-x1) (y2-y1)*(y2-y1));//Find the hypotenuse of the long right triangle with the radius The square of = the sum of the squares of two straight sides

var frag=document.createDocumentFragment();
for(var degree=0;degree<360;degree =2){//Every 2 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) starting point coordinates, lengthX, length lengthY, width newId, the Id of the newly created div 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');
}