HTML5 Canvas에서 이미지를 표시하는걸 알아보겠다.
이미지API에서 허를 찌르는 요소가 있는데, 잘 보길 바란다.
여기서 쓰일 이미지는 아래의 이미지이다.
<64x64이미지가 4장 붙어 있는 이미지. 출처-http://opengameart.org>
1. 이미지 처리 기본
canvas의 이미지뿌리는 API는 drawImage()이다.
Javascript를 통해 Canvas에서 이미지 정보를 읽어들이는 부분을 작성해보자
var context1 = canvas1.getContext("2d");
var catImage = new Image();
catImage.src = "https://t1.daumcdn.net/cfile/tistory/25679E435319402A2B";
catImage라는 변수에 Image를 생성해서 넣고,
catImage.src를 통해 그림의 위치를 지정해 넣었다.
이제 그림이 성공적으로 로딩되면,
그 그림을 뿌리는 부분을 작성해보자
function eventCatImageLoaded()
{
context1.drawImage(catImage, 0, 0);
}catImage에 load이벤트를 걸었다.
load가되면 eventCatImageLoaded()라는 함수를 호출하게 했고,
함수안에선 캔버스 컨텍스트에 이미지 좌표 0,0에 그리게 했다.
2. 이미지 확대/축소
앞에서 사용했던 drawImage()함수에 가로, 세로 인자를 추가하면 이미지를 확대/축소할 수 있다.
3. 이미지 자르기
앞에서 사용했던 drawImage()함수에 이미지 자르는 지점을 추가하면 이미지를 자르고, 확대/축소할 수 있다.
다만, 인자값의 순서를 조심하라!!! 진짜 허를 찌르는 인자구성이다.
다음 포스트에서는 이미지자르기와 setInterval()을 이용한 기본적인 sprite기능을 알아보겠다.
.... 라고 했지만, 2015년 2월 11일 현재, 글쓰기 귀찮아짐.
이전 포스트의 index.html파일을 다운받아서 소스를 보면 됨
'끄적끄적 > HTML5' 카테고리의 다른 글
[HTML5]뱅기게임 - Canvas 충돌검사하기 (0) | 2015.02.05 |
---|---|
[HTML5]뱅기게임 - Canvas에서 키입력으로 그림 움직이기 (1) | 2015.02.03 |
HTML5 Canvas 이미지/스프라이트 (2) | 2014.03.06 |
Event 처리를 통한 Canvas 캡슐화 (0) | 2014.03.04 |
HTML5 개발툴 끝판왕(?) - Liveweave (2) | 2014.03.02 |