HTML5 Canvas 이미지/스프라이트

HTML5 Canvas에서 이미지 뿌리기기와 타이머를 이용한 스프라이트 출력을 해보겠다.

아래의 sprite sheet를 가지고 직접 이 페이지에 움직이는 스프라이트를 구현해보겠다.

<이미지 출처 - http://ancientbeast.com/viewer/>

만약 아래에 "Sorry, Your browser doesn't support HTML5 Canvas."라는 문구가 보인다면 브라우저가 구형인 것이다.

한국인 대부분이 사용하는 익스플로어는 9버젼부터 Canvas를 지원하고,

10버젼부터 비로소 본격적으로 HTML5를 지원한다.

따라서 HTML5를 공부하고 싶은 사람이라면 10이상을 쓰던가, 아예 크롬을 설치해서 쓰길 바란다.

Sorry, Your browser doesn't support HTML5 Canvas.

위의 움직이는 이미지가 잘보이는가?

위는 실제로 이 페이지안에 canvas와 javascript를 이용하여 구현한 것이다.

아래의 index.html소스를 통해 어떻게 구현했는지 확인하길 바란다.

Index.html

자세한 설명은 다음 포스팅을 통해 하겠다.

원래는 이번 포스트에서 자세한 설명을 하려고 하였으나....

티스토리 글쓰기를 통해 이미지를 등록하고,

그 이미즈를 이용해서 canvas와 javascript를 구현하자니, 글을 몇번이나 날려먹는 실수를 저질렀다.

'하~ 힘빠져...'