Use javascript to implement drawing board code_javascript skills

Enter in the console
db.drawCircle([50,50],20,"black");
db.drawLine([5,5],[36,44],"red") ;
You can see the effect

Copy the code The code is as follows:

 
 
<script>  <br>    function DrawingBoard(width,height,size)  <br>    {  <br>        size=size||3  <br>        var container=document.createElement("div");  <br>        this.container=container;  <br><br>        container.runtimeStyle.width=(width)*size "px";  <br>        container.runtimeStyle.height=(height)*size "px";  <br>        container.runtimeStyle.margin="0px";  <br>        //container.style.border="solid 1px blue";  <br>        var count=0;  <br>                for(var y=0;y<height;y )  <BR>        {  <BR>            for(var x=0;x<width;x )  <BR>            {  <BR>                var curr=document.createElement("div");  <BR>                curr.runtimeStyle.height=size "px";  <BR>                curr.runtimeStyle.width=size "px";  <BR>                curr.runtimeStyle.display="inline";  <BR>                curr.runtimeStyle.overflow="hidden";  <BR>                curr.style.backgroundColor="green";  <BR>                curr.src="";  <BR>                container.appendChild(curr);  <BR>            }  <BR>        }  <BR>                //alert(curr.currentStyle.display);  <BR>        //document.body.appendChild(container);  <br><br>        this.drawLine=function(start,end,color)  <BR>        {  <BR>            var dx=start[0]-end[0];  <BR>            var dy=start[1]-end[1];  <BR>            var x,y;  <br><br>            if( Math.abs(dx) > Math.abs(dy) )  <br>            {  <br>                for(var x=start[0];x!=end[0] (end[0]-start[0])/Math.abs(end[0]-start[0]);x =(end[0]-start[0])/Math.abs(end[0]-start[0]) )  <br>                {  <br>                    y=Math.round((x-start[0])/dx*dy start[1]);  <br>                    this.container.childNodes[this.trans([x,y])].style.backgroundColor=color;  <br>                }  <br>            }  <br>            else  <br>            {  <br>                for(var y=start[1];y!=end[1] (end[1]-start[1])/Math.abs(end[1]-start[1]);y =(end[1]-start[1])/Math.abs(end[1]-start[1]) )  <br>                {  <br>                    x=Math.round((y-start[1])/dy*dx start[0]);  <br>                    this.container.childNodes[this.trans([x,y])].style.backgroundColor=color;  <br>                }  <br>            }  <br>        }  <br>        this.drawCircle=function(m,R,color)  <br>        {  <br><br>            for(var r=0;r<=Math.floor(Math.sqrt(R*R-r*r));r )  <BR>            {  <br><br>                x=m[0] r;y=m[1] Math.floor(Math.sqrt(R*R-r*r));  <BR>                this.container.childNodes[this.trans([x,y])].style.backgroundColor=color;  <BR>                x=m[0]-r;y=m[1] Math.floor(Math.sqrt(R*R-r*r));  <BR>                this.container.childNodes[this.trans([x,y])].style.backgroundColor=color;  <BR>                x=m[0] r;y=m[1]-Math.floor(Math.sqrt(R*R-r*r));  <BR>                this.container.childNodes[this.trans([x,y])].style.backgroundColor=color;  <BR>                x=m[0]-r;y=m[1]-Math.floor(Math.sqrt(R*R-r*r));  <BR>                this.container.childNodes[this.trans([x,y])].style.backgroundColor=color;  <BR>                y=m[1] r;x=m[0] Math.floor(Math.sqrt(R*R-r*r));  <BR>                this.container.childNodes[this.trans([x,y])].style.backgroundColor=color;  <BR>                y=m[1]-r;x=m[0] Math.floor(Math.sqrt(R*R-r*r));  <BR>                this.container.childNodes[this.trans([x,y])].style.backgroundColor=color;  <BR>                y=m[1] r;x=m[0]-Math.floor(Math.sqrt(R*R-r*r));  <BR>                this.container.childNodes[this.trans([x,y])].style.backgroundColor=color;  <BR>                y=m[1]-r;x=m[0]-Math.floor(Math.sqrt(R*R-r*r));  <BR>                this.container.childNodes[this.trans([x,y])].style.backgroundColor=color;  <br><br>            }  <br><br><BR>        }  <BR>        this.appendto=function(parent)  <BR>        {  <BR>            parent.appendChild(this.container);  <BR>        }  <br><br>        this.drawPoint=function(p,color)  <BR>        {  <BR>            this.container.childNodes[this.trans(p)].style.backgroundColor=color;  <BR>        }  <BR>        this.trans=function(p)  <BR>        {  <BR>            return p[0] p[1]*width;  <BR>        }  <br><br>        container=null;  <BR>    }  <BR>    function Console(width,height,command)  <BR>    {  <BR>        var container=document.createElement("div");  <BR>        this.container=container;  <br><br>        container.runtimeStyle.width=(width);  <BR>        container.runtimeStyle.height=(height);  <BR>        container.runtimeStyle.margin="0px";  <BR>        container.runtimeStyle.backgroundColor="black";  <BR>        container.runtimeStyle.fontFamily="Terminal";  <BR>        container.runtimeStyle.color="white";  <BR>        container.runtimeStyle.fontSize="16px";  <BR>        this.output=document.createElement("div");  <BR>        container.appendChild(this.output);  <BR>        container.innerHTML ="js>"  <br>        this.input=document.createElement("input");  <br>        container.appendChild(this.input);  <br>        this.input.runtimeStyle.backgroundColor="black";  <br>        this.input.runtimeStyle.borderWidth="0px";  <br>        this.input.runtimeStyle.color="white";  <br>        this.input.runtimeStyle.fontFamily="Terminal";  <br>        this.input.runtimeStyle.width="90%"  <br>        this.input.runtimeStyle.fontSize="16px"  <br>        this.input.runtimeStyle.position="relative";  <br>        this.input.runtimeStyle.top="2px";  <br>        command=command||function(str)  <br>        {  <br><br>            var e;  <br>            try{  <br>                var r=eval(str);  <br>            } catch(e) {  <br>                return "Bad command";  <br>            }  <br>            return r;  <br><br>        }  <br>        this.run=function(str)  <br>        {  <br><br>            this.input.parentNode.childNodes[0].innerHTML =str '<br/>'  <br>            this.input.parentNode.childNodes[0].innerHTML =(command(str) "<br/>")  <br><br>        }  <br>        this.input.command=function()  <br>        {  <br>            this.parentNode.childNodes[0].innerHTML =this.value '<br/>'  <br>           this.parentNode.childNodes[0].innerHTML =(command(this.value) "<br/>")  <br>        }  <br>        this.input.onkeyup=new 함수("e", "e=e||event;if(e.keyCode!=13)return;this.command();this.value='';");  <br>        this.appendto=function(parent)  <br>        {  <br>            parent.appendChild(this.container);  <br>        }  <br>        컨테이너=null;  <br>    }  <br><br>    var c=new Console("100%","50%");  <br>    c.appendto(document.body);  <br>    c.run("window.db=new DrawingBoard(100,100);document.body.appendChild(db.container);");  <br></script>