HTML5 drawImage()..

HTML5의 Canvas에 이미지를 출력 할 수 있는 방법은 drawImage()함수를 이용하는 방법이다.

drawImage(ImageObject, dx, dy);

이미지 오브젝트와 이미지의 시작점을 파라미터로 받는다.

이미지의 변형 없이 그대로 화면에 출력해주는 함수.

drawImage(ImageObject, dx, dy, dw, dh);

이미지 오브젝트와 이미지의 시작점, 이미지의 크기를 파라미터로 받는다.

이미지의 가로세로 크기를 파라미터로 받아 변형 된 이미지를 출력해주는 함수.

위의 사용 예는 단순히 이미지를 가져와 Canvas에 출력하고 크기를 늘리거나 줄여 출력하는 방법이다.

다음에 설명할 방법은 이미지에서 특정 부위만을 잘라서 사용하는 방법이다.

drawImage(imageObject, sx, sy, sw, sh, dx, dy, dw, dh);

각 파라미터에 대한 설명

imageObject : 이미지 객체

sx : tileSheet에서 사용할 이미지의 시작점 X

sy : tileSheet에서 사용할 이미지의 시작점 Y

sw : tileSheet에서 사용할 이미지의 가로 크기

sh : tileSheet에서 사용할 이미지의 세로 크기

dx : 출력할 이미지의 시작점 X

dy : 출력할 이미지의 시작점 Y

dw : 출력할 이미지의 가로 크기

dh : 출력할 이미지의 세로 크기

위의 이미지에서 두번째 비행기 이미지만을 잘라 화면에 출력함을 알수 있다.