HTML5 캔버스에서 이미지의 특정 부분만 그리는 방법

HTML5 캔버스에서 이미지의 일부만 그리기

HTML5 캔버스(Canvas)에서 이미지 전체가 아닌 특정 영역만 잘라내어 화면에 그리고 싶다면 drawImage() 메서드를 사용하면 됩니다. 이 메서드는 소스 이미지의 원하는 좌표와 크기를 지정해 스프라이트(sprite)처럼 필요한 부분만 렌더링할 수 있어 게임 개발 등에서 매우 유용하게 활용됩니다.

단, 주의해야 할 점이 있습니다. 이미지의 onload 함수는 이미지가 브라우저에 처음 로드될 때 단 한 번만 실행된다는 것입니다. 따라서 애니메이션 루프 안에서 반복적으로 이미지를 그려야 하는 경우에는 setInterval과 함께 img.complete 속성을 확인하는 방식으로 처리하는 것이 좋습니다.

예제 코드

$(document).ready(function () {
    var cw = 200;
    var ch = 300;
    var ctx = $("#myCanvas")[0].getContext("2d");
    var myImg = new Image();
    myImg.src = "https://oi62.tinypic.com/148yf7.jpg";
    var Fps = 60;

    var PlayerTank = {
        x: cw / 2,
        w: 85,
        h: 85,
        Pos: 3,
        draw: function () {
            ctx.drawImage(myImg, this.Pos * this.w, 0, this.w, this.h, this.x, ch - this.h, this.w, this.h);
        }
    };

    var game = setInterval(function () {
        if (myImg.complete) {
            PlayerTank.draw();
            PlayerTank.x++;
        }
    }, 1000 / Fps);
});

drawImage() 파라미터 살펴보기

위 코드의 핵심인 drawImage() 메서드는 다음과 같은 인자를 순서대로 받습니다.

• image: 그릴 대상 소스 이미지
• sx, sy: 소스 이미지에서 잘라낼 영역의 시작 좌표 (x, y)
• swidth, sheight: 잘라낼 영역의 너비와 높이
• x, y: 캔버스 위에 배치될 위치 좌표
• width, height: 캔버스에 실제로 그려질 크기

위 예제에서는 this.Pos * this.w, 0을 통해 스프라이트 시트에서 가로 방향으로 프레임을 선택하고 있으며, 초당 60프레임(Fps)으로 x 값을 증가시켜 탱크 오브젝트가 화면을 가로질러 이동하도록 구현했습니다.

정리

캔버스 애니메이션에서 이미지를 다룰 때는 onload 이벤트가 한 번만 발생한다는 점을 기억하세요. complete 속성으로 이미지 로딩 완료 여부를 확인한 후 drawImage()를 호출하면, 이미지가 준비되기 전에 발생하는 오류 없이 안정적으로 원하는 영역만 그릴 수 있습니다.