HTML5 Canvas 이미지 처리

HTML5 Canvas에서 이미지를 표시하는걸 알아보겠다.

이미지API에서 허를 찌르는 요소가 있는데, 잘 보길 바란다.

 

 

여기서 쓰일 이미지는 아래의 이미지이다.

 

<64x64이미지가 4장 붙어 있는 이미지. 출처-http://opengameart.org>

 

 

1. 이미지 처리 기본

  canvas의 이미지뿌리는 API는 drawImage()이다.

 

Javascript를 통해 Canvas에서 이미지 정보를 읽어들이는 부분을 작성해보자

var canvas1 = document.getElementById("CANVAS_1");

var context1 = canvas1.getContext("2d"); 

var catImage = new Image();

 

catImage.src = "https://t1.daumcdn.net/cfile/tistory/25679E435319402A2B";

catImage라는 변수에 Image를 생성해서 넣고,

catImage.src를 통해 그림의 위치를 지정해 넣었다.

 

이제 그림이 성공적으로 로딩되면,

그 그림을 뿌리는 부분을 작성해보자

catImage.addEventListener('load', eventCatImageLoaded, false);

function eventCatImageLoaded()

{

    context1.drawImage(catImage, 0, 0);

}

catImage에 load이벤트를 걸었다.

load가되면 eventCatImageLoaded()라는 함수를 호출하게 했고,

함수안에선 캔버스 컨텍스트에 이미지 좌표 0,0에 그리게 했다.

 

 

2. 이미지 확대/축소

 앞에서 사용했던 drawImage()함수에 가로, 세로 인자를 추가하면 이미지를 확대/축소할 수 있다. 

 

 

 

3. 이미지 자르기

 앞에서 사용했던 drawImage()함수에 이미지 자르는 지점을 추가하면 이미지를 자르고, 확대/축소할 수 있다.

다만, 인자값의 순서를 조심하라!!! 진짜 허를 찌르는 인자구성이다.

 

 

 

다음 포스트에서는 이미지자르기와 setInterval()을 이용한 기본적인 sprite기능을 알아보겠다.

.... 라고 했지만, 2015년 2월 11일 현재, 글쓰기 귀찮아짐.

이전 포스트의 index.html파일을 다운받아서 소스를 보면 됨