HTML5 | canvas 에서 image 와 audio 요소 사용하기

지난 포스팅에 캔버스에 도형을 그리는 것을 했다. 이것만 가지고는 게임이나 애니메이션을 표현하기에 부족하다.

 

HTML5를 사용해서 멀티미디어 웹을 구현하려면 이미지와 오디오를 사용할 수 있어야 한다.

 

HTML5에는 이들의 처리 기능이 내장되어 있다. HTML5의 image, audio 태그와 자바 스크립트로 어떻게 조작할 수 있는지 알아보자.

이미지(Image) 요소

 

* 먼저 캔버스를 열어 놓는다. 도형을 그리건 이미지를 그리건 캔버스(도화지) 부터 가져와야 한다.

 

캔버스 태그 안의 메시지는 브라우저가 HTML5를 지원하지 않는 경우 내보내는 메시지이다. canvas를 멀티 미디어 요소로 인식하지 못하는 브라우저는 그냥 일반 태그로 해석할 것이기 때문이다.

    <canvas width="800" height="600" id="testcanvas" style="border: 1px solid lightblue;">
        Your browser does not support HTML5 Canvas. Please shift to a newer browser.
        </canvas>
    <img src='rocket.png' id="rocket">

*img image 태그는 예전 그대로이다. 자바스크립트에서 DOM 객체의 아이디로 선택해서 이미지를 canvas에 올릴 것이다. 웹브라우저에는 출력될텐데 스타일 시트에서 img 태그의 표시를 막을 수도 있다. 아니면 자바스크립트에서 image 객체를 만들어 사용할 수도 있다. 양쪽의 방법을 다 제공해 주니까 사용하기에 편하다. 예를 들어 img 태그는 유저의 캐릭터 선택을 위해 사용할 수 있고 선택된 캐릭터를 canvas에 뿌려주는 것은 자바스크립트로 할 수 있다.

 

 

자바스크립트의 첫번째는 canvas 객체의 콘텍스트 인스턴스를 생성하는 일이다. canvas 요소를 DOM객체의 아이디로 선택하는 것을 볼 수 있다.

 

Image도 DOM의 아이디 선택자로 가져온다. context의 drawImage 메소드에 전달만 하면 canvas상에 이미지를 그린다.

    var canvas = document.getElementById("testcanvas");
    var context = canvas.getContext("2d");

    var image = document.getElementById("rocket");
    
    context.drawImage(image, 50, 50);

 

*원본 이미지의 확대나 축소, 부분 표시들이 가능하다. 메소드는 같으나 오버로딩이 있다. 매개변수가 가장 많은 메소드가 부분 표시인데, 스프라이트 파일을 사용할 때 유용하다. 상세사항은 Web API를 참고한다.

 

CanvasRenderingContext2D.drawImage() - Web APIs | MDN (mozilla.org)

    context.drawImage(image, 250, 250, 70, 70);
    

    context.drawImage(image, 50, 50, 70, 70, 250, 400, 100, 100);

 

* rotate 기능도 제공한다. 컨텍스트.translate 를 중심으로 라디안 단위로 rotate 한다. 좌표 설정하는게 약간 헷갈린다. 캐릭터가 어느 한 점을 기점으로 돌고 있는 모습이다.

 

    context.translate(100, 100)

    context.rotate(-0.40);
    
    context.drawImage(image, 250, 250, 70, 70);
    
    context.drawImage(image, 50, 50, 70, 70, 250, 400, 100, 100);

 

오디오(Audio)

HTML5의 오디오 태그는 아래와 같다. 웬만한 브라우저에서는 작동을 잘 한다.

    <audio src="Ludum Dare 32 - Track 4.wav" controls="controls">
        browser does not support audio</audio>

이런 오디오 컨트롤이 달린다

이것도 브라우저에 표시하고 싶지 않다면 style 태그에서 display를 none으로 한다.

        audio{
            display: none;
        }

 

*  html 태그와 상관없이 자바스크립트에서 Audio 클래스를 생성할 수 있다. play 메소드는 웹이 로딩되면 바로 재생을 시작한다.

 

    var sound = new Audio();
    sound.src = "Ludum Dare 32 - Track 4.wav";
    sound.play();

 

 

* 이 문서에서는 image와 audio 객체의 아주 기본적인 사항만 다루었는데 실제로 쓸만한 것은 역시 MDN의 WebAPI 문서에 다 나와있다. 내용이 아주 많기 때문에 이것을 하루종일 읽고 있는 것은 힘들 것이니 자신에게 필요한 API가 무엇인지 빠르게 파악할 수 있는 안목을 기르는게 좋다.

 

CanvasRenderingContext2D - Web APIs | MDN (mozilla.org)

CanvasRenderingContext2D