Canvas wiper 구현(javascript)-1차 테스트

애니메이션과 관련된 자료를 좀 찾다가 멋진 분을 보았다.

 

https://youtu.be/cpEeqACsF_Q?t=42 

구현된 많은게 있었지만 그 중에서 나는 저거를 보고 구현 해보고 싶은 생각이 들었다.

 

지금까지 계속 관심만 가지고 하지 않던 Canvas쪽을 좀 보면 어느정도 될거 같았는데...결국 잘 되지 않는 중... 그래도 시도하면서 많은것을 알고 지나간다.

테스트한다고 주석 투성이고 미완성이지만 일단 1일차 코드와 현재 상태를 올린다. 저 분은 30분만에 만들었다는데(....)

 

        <canvas id="canvas" width=600 height=400></canvas>
   
        <script>
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            var degree = 0;
            var swiper_direction = 'left';
            var ch = canvas.height;

            function drawSwiper(){  
                //ctx.translate(300, 300);
                //ctx.rotate(degree*Math.PI/180);
                //ctx.translate(-300, 300);

            
                //context.translate(0, 250);
                //ctx.rotate(degree*Math.PI/180);
                //ctx.save();
                //context.translate(250, 250);
                /*
                ctx.beginPath();
                ctx.moveTo(300,300);
                ctx.lineTo(600,300);
                ctx.stroke();
                */

                ctx.save();
                var x = 300;//+(0.5*300);
                var y = ch;//+(0.5*300);
                ctx.translate(x,y);
                ctx.rotate(degree*Math.PI/180);
                ctx.translate(-x,-y);
                ctx.beginPath();
                ctx.moveTo(300,ch);
                ctx.lineTo(600,ch);
                ctx.stroke();
                ctx.restore();

                if(swiper_direction == 'left'){
                    degree--;
                }
                if(swiper_direction == 'right'){
                    degree++;
                }
                
                if(degree == 0){
                    swiper_direction = 'left';
                }
                else if(degree == -180){
                    swiper_direction = 'right';
                }
                
    
            }
            function getRandomInt(min,max){
                return Math.random() * (max-min)+min;
            }
            
            //각 글자 마다 해당 x,y,dx,dy를 저장하고 있어야함
            var textArr = [];//텍스트 객체에 대한 정보 저장
            var maxText = 200;
            var x = getRandomInt(0,600);
            var y = 48;
            var dx = 0;
            var dy = 2;
            var textDegree = getRandomInt(0,360);

            makeNewText();
            
            function drawText(){

                textArr.forEach(function(data){
                    ctx.save();
                    ctx.font = '48px serif';
                    ctx.translate(data.x,data.y);
                    ctx.rotate(data.textDegree*Math.PI/180);
                    ctx.translate(-data.x,-data.y);
                    ctx.fillText(data.char,data.x,data.y);

                    ctx.restore();

                    data.x += data.dx;
                    data.y += data.dy;

                    if(data.y > ch+50){
                        data.y = 0;
                    }
                });
                
                //떨어지는 속도는 일정하게 / 단 각도는 랜덤 / 랜덤 글자
                //글자의 회전은 박스의 회전과는 다른것인가??
                /*
                ctx.save();
                ctx.font = '48px serif';
                ctx.translate(x,y);
                ctx.rotate(textDegree*Math.PI/180);
                ctx.translate(-x,-y);
                ctx.fillText('a',x,y);

                ctx.restore();

                x += dx;
                y += dy;
                */
            }
            function makeNewText(){
                //var randCount = getRandomInt(0,1);
                randCount = 50;

                //화면에서 넘어가면 사라져야하는데 사라지는 조건은?
                //일단은 내려오는것부터 시작하고 최적화 시킬것
                for(i=0; i<randCount; i++){
                    var temp_x = getRandomInt(0,600);
                    var temp_y = 0;
                    var temp_dx = 0;
                    var temp_dy = 2;
                    var temp_textDegree = getRandomInt(0,360);
                    var temp_char = String.fromCharCode(getRandomInt(65,90));
                    textArr.push({char:temp_char,x:temp_x,y:temp_y,dx:temp_dx,dy:temp_dy,textDegree:temp_textDegree});
                }
            }
            
            function drawTest(){
                /*
                //사각형 회전 테스트
                ctx.save();
                // 파란 사각형 그리기
                ctx.fillStyle = '#0095DD';
                ctx.fillRect(150, 30, 100, 100);
                
                ctx.translate(200, 80); // 사각형 중심으로 이동하기
                                        // x = x + 0.5 * width
                                        // y = y + 0.5 * height
                ctx.rotate((Math.PI / 180) * 25); // 회전
                ctx.translate(-200, -80); // 예전 위치로 이동하기

                // 회색 사각형 그리기
                ctx.fillStyle = '#4D4E53';
                ctx.fillRect(150, 30, 100, 100);
                ctx.restore();
                */


                
                //글자 회전 테스트
                ctx.save();
                ctx.textAlign="center";
                ctx.textBaseline="middle";
                ctx.font = '48px serif';
                ctx.fillText('a',50,24);//48px인데 24px만큼 아래로 내려오면 전체 글자가 그려짐 왜...?

                ctx.translate(50, 24); //글자 중심으로 이동하기
                ctx.rotate((Math.PI / 180) * 180); // 회전
                ctx.translate(-(50),-24);//원래 위치로 이동
                ctx.fillText('a',50,24);    
                
                ctx.restore();//원래 위치로 이동
                
               /*
                //글자 회전 테스트2
                var cw=canvas.width;
                var ch=canvas.height;

                ctx.beginPath();
                ctx.moveTo(cw/2,0);
                ctx.lineTo(cw/2,ch);
                ctx.stroke();
                ctx.beginPath();
                ctx.moveTo(0,ch/2);
                ctx.lineTo(cw,ch/2);
                ctx.stroke();

                ctx.save();
fcon
                //해당 속성을 통해서 정 가운데를 돌릴 수 있다.
                ctx.textAlign="center";
                ctx.textBaseline="middle";

                ctx.translate(300,400);
                ctx.rotate(Math.PI/2);
                ctx.fillText("Hello World!",0,0);
                ctx.translate(-300,-400);
                ctx.restore();
                */


            }
            function start(){
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                drawSwiper();
                drawText();
            }
        
            //drawTest();
            //drawSwiper();
            setInterval(start,10);
            
        </script>

 

 

 

그리고 보다보니 "일은 배신하지 않는다" 라는 책도 내셨더라...궁금해서 바로 오늘 구매!!

내일 도착하면 신나게 읽어봐야겠다 ㅎㅎ