자바스크립트를 사용하여 드로잉 보드 code_javascript 기술 구현

콘솔에 입력
db.drawCircle([50,50],20,"black")
db.drawLine([5,5],[36,44],"red") ;
효과를 보실 수 있습니다

코드를 복사하세요 코드는 다음과 같습니다

 
 
<스크립트> 
    기능 드로잉보드(너비, 높이, 크기) 
    { 
        size=size||3 
        var container=document.createElement("div"); 
        this.container=container; 

        container.runtimeStyle.width=(너비)*크기 "px"; 
        container.runtimeStyle.height=(height)*size "px"; 
        container.runtimeStyle.margin="0px"; 
        //container.style.border="solid 1px blue"; 
        var count=0; 
               for(var y=0;y        { 
           for(var x=0;x            { 
                var curr=document.createElement( "div"); 
                curr.runtimeStyle.height=size "px"; 
                curr.runtimeStyle.width=size "px"; 
                curr.runtimeStyle.display="inline"; 
                curr.runtimeStyle.overflow="hidden"; 
                curr.style.BackgroundColor="green"; 
                curr.src=""; 
                container.appendChild(curr); 
            } 
        } 
               //alert(curr.currentStyle.display); 
        //document.body.appendChild(컨테이너); 

        this.drawLine=function(start,end,color) 
        { 
            var dx=start[0]-end[0]; 
            var dy=start[1]-end[1]; 
            var x,y; 

           if( Math.abs(dx) > Math.abs(dy) ) 
            { 
               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 ]) ) 
               { 
                   y=Math.round((x-start[0])/dx*dy start[1]); 
                   this.container.childNodes[this.trans([x,y])].style.BackgroundColor=color; 
               } 
            } 
            else 
            { 
               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]) ) 
               { 
                  x=Math.round((y- 시작[1])/dy*dx 시작[0]); 
                   this.container.childNodes[this.trans([x,y])].style.BackgroundColor=color; 
              } 
            } 
        } 
        this.drawCircle=function(m,R,color) 
        { 

            for(var r=0;r<=Math.floor (Math.sqrt(R*R-r*r));r ) 
            { 

               x=m[0] r;y=m[1] Math.floor(Math.sqrt(R*R-r *아르 자형)); 
                this.container.childNodes[this.trans([x,y])].style.BackgroundColor=color; 
                x=m[0]-r;y=m[1] Math.floor(Math.sqrt(R*R-r*r)); 
                this.container.childNodes[this.trans([x,y])].style.BackgroundColor=color; 
                x=m[0] r;y=m[1]-Math.floor(Math.sqrt(R*R-r*r)); 
                this.container.childNodes[this.trans([x,y])].style.BackgroundColor=color; 
                x=m[0]-r;y=m[1]-Math.floor(Math.sqrt(R*R-r*r)); 
                this.container.childNodes[this.trans([x,y])].style.BackgroundColor=color; 
               y=m[1] r;x=m[0] Math.floor(Math.sqrt(R*R-r*r)); 
                this.container.childNodes[this.trans([x,y])].style.BackgroundColor=color; 
               y=m[1]-r;x=m[0] Math.floor(Math.sqrt(R*R-r*r)); 
                this.container.childNodes[this.trans([x,y])].style.BackgroundColor=color; 
               y=m[1] r;x=m[0]-Math.floor(Math.sqrt(R*R-r*r)); 
                this.container.childNodes[this.trans([x,y])].style.BackgroundColor=color; 
               y=m[1]-r;x=m[0]-Math.floor(Math.sqrt(R*R-r*r)); 
                this.container.childNodes[this.trans([x,y])].style.BackgroundColor=color; 

            } 


        } 
        this.appendto=function(parent) 
       {  parent.appendChild(this. 컨테이너); 
        } 

        this.drawPoint=function(p,color) 
        { 
            this.container.childNodes[this.trans(p)].style.BackgroundColor=color; 
        } 
        this.trans=function(p) 
        { 
            return p[0] p[1]*width; 
        } 

        컨테이너=null; 
    } 
    기능 콘솔(너비, 높이, 명령) 
    { 
        var container=document.createElement("div"); 
        this.container=container; 

        container.runtimeStyle.width=(너비); 
        container.runtimeStyle.height=(높이); 
        container.runtimeStyle.margin="0px"; 
        container.runtimeStyle.BackgroundColor="black"; 
        container.runtimeStyle.fontFamily="터미널"; 
        container.runtimeStyle.color="white"; 
        container.runtimeStyle.fontSize="16px"; 
        this.output=document.createElement("div"); 
        container.appendChild(this.output); 
        container.innerHTML ="js>" 
        this.input=document.createElement("input"); 
        container.appendChild(this.input); 
        this.input.runtimeStyle.BackgroundColor="black"; 
        this.input.runtimeStyle.borderWidth="0px"; 
        this.input.runtimeStyle.color="white"; 
        this.input.runtimeStyle.fontFamily="터미널"; 
        this.input.runtimeStyle.width="90%" 
        this.input.runtimeStyle.fontSize="16px" 
        this.input.runtimeStyle.position="relative"; 
        this.input.runtimeStyle.top="2px"; 
        command=command||function(str) 
        { 

            var e; 
            시도해 보세요{ 
               var r=eval(str); 
            } catch(e) { 
               '잘못된 명령'을 반환합니다. 
            } 
            return r; 

        } 
        this.run=function(str) 
        { 

            this.input.parentNode.childNodes[0].innerHTML =str '
' 
            this.input.parentNode.childNodes[0].innerHTML =(command(str) "
") 

        } 
        this.input.command=function() 
        { 
            this.parentNode.childNodes[0].innerHTML =this.value '
' 
           this.parentNode.childNodes[0].innerHTML =(command(this.value) "
") 
        } 
        this.input.onkeyup=new 함수("e", "e=e||event;if(e.keyCode!=13)return;this.command();this.value='';"); 
        this.appendto=function(parent) 
        { 
            parent.appendChild(this.container); 
        } 
        컨테이너=null; 
    } 

    var c=new Console("100%","50%"); 
    c.appendto(document.body); 
    c.run("window.db=new DrawingBoard(100,100);document.body.appendChild(db.container);");