피타고라스 정리와 비례식을 이용하여 얻어낸 평면(사각형)의 회전 구현.

Your browser does not support the HTML5 canvas tag.

 공식

 h=(물체의 높이)

 M=(물체의 폭)

 y=(물체와 시점간의 거리)

 H=(물체와 시점간의 거리에 보이는 높이)

 x축의 거리는 

 x=(y*M*cos(q))/(y+M*sin(q))

 높이는 h을 계산하는건,

 h=H(√x^2+y^2)/(√y^2+2yMsin(q)+M^2)

-SRC-

<div id="content" style="width:630px; overflow:hidden;color:#333333;">
                                <canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;">
            Your browser does not support the HTML5 canvas tag.</canvas>
 
        <script>
        
            var x,y;
            
            function draws(){
                ctx.beginPath();
 
                ctx.clearRect(0,0,c.width, c.height);
 
                calcX=((line*(heights/2)*cos)/(line+(heights/2)*sin));
 
                calcY=heights/2;
                calcY=calcY*Math.sqrt(calcX*calcX+line*line);
                calcY=calcY/Math.sqrt(Math.pow(line,2)+(((2*line)*(rec/2))*sin)+Math.pow(rec/2,2));
 
                ctx.moveTo((c.width/2)-calcX,(c.height/2)-calcY);
 
                Thetas=(-Thetas);
 
                sin=Math.sin(Thetas),cos=Math.cos(Thetas);
 
                calcX=((line*(heights/2)*cos)/(line+(heights/2)*sin));
 
                calcY=heights/2;
                calcY=calcY*Math.sqrt(calcX*calcX+line*line);
                calcY=calcY/Math.sqrt(Math.pow(line,2)+(((2*line)*(rec/2))*sin)+Math.pow(rec/2,2));
 
                ctx.lineTo((c.width/2)+calcX,(c.height/2)-calcY);
                ctx.lineTo((c.width/2)+calcX,(c.height/2));
                ctx.lineTo((c.width/2)+calcX,(c.height/2)+calcY);
 
                Thetas=(-Thetas);
                sin=Math.sin(Thetas),cos=Math.cos(Thetas);
 
                calcX=((line*(heights/2)*cos)/(line+(heights/2)*sin));
 
                calcY=heights/2;
                calcY=calcY*Math.sqrt(calcX*calcX+line*line);
                calcY=calcY/Math.sqrt(Math.pow(line,2)+(((2*line)*(rec/2))*sin)+Math.pow(rec/2,2));
 
                ctx.lineTo((c.width/2)-calcX,(c.height/2)+calcY);
                ctx.lineTo((c.width/2)-calcX,(c.height/2));
                ctx.lineTo((c.width/2)-calcX,(c.height/2)-calcY);
 
                ctx.stroke();
 
            }
 
            var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            ctx.lineWidth="2";
 
            var rec=c.height;
            var line=400;
            var heights=(rec*c.height)/line;
 
            var theta=90;
            var Thetas=Math.PI/180*theta;
            var sin=Math.sin(Thetas),cos=Math.cos(Thetas);
 
            var calcX, calcY;
 
            var centX,centY;
 
            c.addEventListener("mousedown",dragstart,false);
 
            centX=0;
            centY=line;
            
            setTimeout(ani,100);
            
            function ani(){
                theta=(theta+1)%180;
                Thetas=Math.PI/180*theta;
                draws();
                setTimeout(ani,10);
            }
            
            function dragstart(event){
                x=event.x;
                y=event.y;
                event.target.removeEventListener("mousedown",dragstart,false);
                event.target.addEventListener("mousemove",drag,false);
                event.target.addEventListener("mouseup",dragend,false);
            }
 
            function drag(event){
 
                Thetas=(Math.asin(event.x/Math.sqrt(Math.pow(event.x,2)+Math.pow(event.y,2)))-Math.asin(x/Math.sqrt(Math.pow(x,2)+Math.pow(y,2))));
 
                document.getElementById("text").innerHTML=(Math.asin(event.x/Math.sqrt(Math.pow(event.x,2)+Math.pow(event.y,2)))-Math.asin(x/Math.sqrt(Math.pow(x,2)+Math.pow(y,2))));
 
                draws();
 
            }
 
            function dragend(event){
                event.target.removeEventListener("mousemove",drag,false);
                event.target.removeEventListener("mouseup",dragend,false);
                event.target.addEventListener("mousedown",dragstart,false);
            }
 
        </script>