반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

HTML5 Canvas 이용하기 - 03 -

2011. 12. 23. 11:05 | Posted by 솔웅


HTML5 canvas에 대해서 계속 공부하고 있습니다.

오늘은 일단 아래 코드를 공부할께요.
 function doFirst(){
    var x = document.getElementById('canvas');
    canvas = x.getContext('2d');
   
    canvas.font="bold 22px Tahoma";
    canvas.textAlign="start;
    canvas.fillText("start",10,30);
   
    canvas.translate(100,150);
    canvas.fillText("after translate",0,0);
   
    canvas.rotate(1);
    canvas.fillText("after rotate",0,0);
   
    canvas.scale(1.5,4);
    canvas.fillText("after rotate",0,20);
 }
 window.addEventListener("load",doFirst,false);

처음에 font를 정해주고 정렬방식을 start 로 해 줍니다.
(보통 left,center,right 인데 여긴 start, middle, end 인가 봅니다. 왜 그런진 모르겠어요. 만든사람 마음이니까......)
그리고 start라는 글자를 쓰게 되요.
다음줄은 보니까 translate 이 있네요. 이건 x 좌표로 100포인트 y좌표로 150포인트 옮기라는 겁니다.
다음에 after translate 이라는 글자를 쓰는데 x,y는 0,0 입니다. 이 0,0은 canvas의 0,0이 아니라 translate 했던 100,150 을 기준으로 한 0,0 입니다.
그러니까 translate 하지 않고 100,150 한것이랑 똑같죠.
그래서 이 after translate 는 100,150 지점에 쓰여질 겁니다.
이 translate 명령어는 start 글자에는 적용되지 않습니다. translate 명령이 내려진 이후의 애들한테만 적용됩니다.

다음엔 뭐가 있죠? rotate 이 있네요.
이건 회전 시키라는 명령어인데요. 괄호 안에 있는 1은 Radian 단위 입니다. 반지름과 같은 길이의 호를  연결한 원의 중심 각도인데요. 나중에 게임 만들 때 아주 많이 쓰이게 되는 개념입니다. 모르시면 따로 공부해 두시는게 좋을거예요.
하여간 1Radian 만큼 회전시키라고 한 다음에 있는 것이 after rotate 이라는 글자입니다.
이 글자는 일단 translate 명령이 내려진 다음에 있으니까 좌표가 0,0으로 돼 있지만 실제 출력되는 위치는 100,150 지점이 됩니다.
그리고 rotate 하라고 했으니까 1Ratian 만큼 회전할 테구요.
다음은 scale 입니다. 좌우로 1.5배 위아래로 4배 키우라는 겁니다.
그리고 after Scale이라는 글자가 찍힐 텐데..
당연히 이 글자는 translate, rotate, scale 영향을 다 받게 됩니다.


이제 앞으로 캔바스에 그려지는 모든 것들은 다 이렇게 translate,rotate,scale 이 적용될 텐데요.
만약 이게 다 적용되지 않도록 하고 싶으면 어떻게 할까요?
save와 restore를 이용하면 됩니다.
자바스크립트를 아래와 같이 바꿔보세요.
 function doFirst(){
    var x = document.getElementById('canvas');
    canvas = x.getContext('2d');
   
    canvas.font="bold 22px Tahoma";
    canvas.textAlign="start";
    canvas.fillText("start",10,30);
   
    canvas.save();
   
    canvas.translate(100,150);
    canvas.fillText("after translate",0,0);
   
    canvas.rotate(1);
    canvas.fillText("after rotate",0,0);
   
    canvas.scale(1.5,4);
    canvas.fillText("after Scale",0,20);
   
    canvas.restore();
   
    canvas.fillText("after restoring", 110,30);
 }
 window.addEventListener("load",doFirst,false);

보시면 처음 폰트와 정렬이 선언된 다음에 save() 를 해 놓습니다.
그리고 그 이후에 translate,rotate,scale 이런 기능들을 적용하구요.
다시 이 기능들을 적용하지 않기 위해 restore()를 해 줬습니다.
after restoring 은 제대로 110,30 위치에 쓰여질 겁니다.


오늘은 간단한 몇가지 기능들에 대해 공부했습니다.
반응형

Comment