HTML5 Canvas에서 이미지 뿌리기기와 타이머를 이용한 스프라이트 출력을 해보겠다.
아래의 sprite sheet를 가지고 직접 이 페이지에 움직이는 스프라이트를 구현해보겠다.
<이미지 출처 - http://ancientbeast.com/viewer/>
한국인 대부분이 사용하는 익스플로어는 9버젼부터 Canvas를 지원하고,
10버젼부터 비로소 본격적으로 HTML5를 지원한다.
따라서 HTML5를 공부하고 싶은 사람이라면 10이상을 쓰던가, 아예 크롬을 설치해서 쓰길 바란다.
위의 움직이는 이미지가 잘보이는가?위는 실제로 이 페이지안에 canvas와 javascript를 이용하여 구현한 것이다.
아래의 index.html소스를 통해 어떻게 구현했는지 확인하길 바란다.
자세한 설명은 다음 포스팅을 통해 하겠다.
원래는 이번 포스트에서 자세한 설명을 하려고 하였으나....
티스토리 글쓰기를 통해 이미지를 등록하고,
그 이미즈를 이용해서 canvas와 javascript를 구현하자니, 글을 몇번이나 날려먹는 실수를 저질렀다.
'하~ 힘빠져...'
Google AdSense
'끄적끄적 > HTML5' 카테고리의 다른 글
[HTML5]뱅기게임 - Canvas에서 키입력으로 그림 움직이기 (1) | 2015.02.03 |
---|---|
HTML5 Canvas 이미지 처리 (1) | 2014.03.07 |
Event 처리를 통한 Canvas 캡슐화 (0) | 2014.03.04 |
HTML5 개발툴 끝판왕(?) - Liveweave (2) | 2014.03.02 |
[HTML5] Javascript로 canvas제어하기 (0) | 2014.03.01 |