HTML5 Canvas 이용하기 - 04 - Image/Animation

HTML 5로 이미지를 다루는 법을 배워보겠습니다.
 function doFirst(){
    var x = document.getElementById('canvas');
    canvas = x.getContext('2d');
   
    var pic = new Image();
    pic.src="nytimes.jpg";
   
    canvas.drawImage(pic, 0, 0);
 }
 window.addEventListener("load",doFirst,false);

곧바로 자바스크립트부터 들어가죠.
처음에 Image를 다룰 변수를 만들어 줍니다. 여기서는 pic이라는 지역변수(var)를 만들었습니다.
그 다음엔 이 변수에 원하는 이미지를 담습니다. 저는 nytimes.jpg라는 이미지를 사용할겁니다. (이 글 쓰면서 뉴욕타임즈 들어가 보니까 이 이미지가 있더라구요.)
이제 캔바스에다 그리면 됩니다. drawImage를 사용해서 pic을 x=0,y=0의 위치에 그립니다.

이렇게 하면 HTML5로 canvas에 image 를 넣을 수 있습니다.

그러면 아래 세 줄을 추가해 보세요.
    canvas.drawImage(pic, 100, 50,150,80);
    canvas.drawImage(pic, 400, 30, 69, 97, 300, 100, 103, 145);
    canvas.clearRect(500, 100, 10, 40);

좀 어지러워 졌죠?
첫 번째 줄은 이미지를 100,,50인 위치에 너비 150 높이 80으로 그리라는 의미입니다.
그리고 두번째는 400,30인 위치에서 너비 69 높이 97 만큼 복사해서 300,100 위치에 너비 103 높이 145 만큼 그리라는 겁니다.
그리니까 이미지 일 부분을 Copy and Paste 까지 할 수 있네요.
마지막은 우리가 전에 배웠던 clearRect 입니다. 해당 부분 만큼을 지워버리는 거죠.

제대로 설명 된 걸 한번 볼께요.

이제 좀 다이나믹한 걸 함 보겠습니다.
 function doFirst(){
    var x = document.getElementById('canvas');
    canvas = x.getContext('2d');

     window.addEventListener("mousemove",dougy,false);
 }
 
 function dougy(e) {
    canvas.clearRect(0,0,600,400);
    var xPos = e.clientX;
    var yPos = e.clientY;
    canvas.fillRect(xPos,yPos,50,50);
 }
 
 window.addEventListener("load",doFirst,false);

doFirst 안에 리스너를 하나 달았습니다. 지금까지 맨 밑에 있는 리스너만 썼었는데요. 이건 load 할 때 시행 되는 겁니다. doFirst 안에 있는 것은 마우스가 움직일 때 계속 불려 지는 겁니다.
마우스가 움직이는 동안 계속 dougy라는 함수를 호출 합니다.
dougy 함수를 보면 e를 인수로 받습니다. 이 e는 리스너로부터 전달되는 정보들 입니다.
처음에는 canvas를 싹 지웁니다.
다음에 보면 e.clientX 라는게 있는데 이건 마우스를 클릭했을 때 그 x 위치 입니다.
그러니까 e.clientY는 마우스의 y 위치 이겠죠. 이 정보들이 바로 아까 본 e 에 다 들어 있는 겁니다.
이 마우스 위치인 x,y 를 각각 xPos, yPos 변수에 대입 시킵니다.
그리고 사각형을 그리는데요. 그 그리는 위치가 바로 마우스의 위치인 xPos,yPos 입니다.
그러니까 마우스가 움직이는 동안 캔버스를 지우고 마우스 위치에 사각형을 그리는 작업을 계속 하는 겁니다.
1초에 몇백번 하는지 몇천번 하는지 모르겠지만 하여간 계속 그 작업을 합니다.
그러면 사각형이 마우스를 움직는대로 따라 움직이게 됩니다.

제법 그럴듯한 애니메이션 효과가 납니다.
이 사각형을 우주선 이미지로 바꾸면 마우스가 움직이는 대로 우주선이 움직일 수도 있습니다.
이제 HTML5로 게임 제작하기에 한발짝 더 다가선 것 같습니다.
자 한가지 여기서 dougy 함수 안에 canvas를 지우는 부분을 없애 보세요. // 로 주석을 다셔도 됩니다.

그리고 나서 마우스를 움직이면 캔버스를 지우지 않기 때문에 이전에 그린 사각형이 그대로 남겠죠? 그러면 위에 보시는 바와 같이 선을 그을 수가 있습니다.
포토샵의 브러시 툴 갖지 않나요?

지금까지 HTML5의 Canvas에 대해 알아봤습니다.
다음엔 HTML5의 새로운 Concept 에 대해 공부하겠습니다.