Enter in the console
db.drawCircle([50,50],20,"black");
db.drawLine([5,5],[36,44],"red") ;
You can see the effect
<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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
