[CookBook] 미디어와 인터랙티브 애플리케이션 작성하기

       



Chapter 14. 미디어와 인터랙티브 애플리케이션 작성





참고 사이트:


HTML5 API - Canvas - 1

http://mohwaproject.tistory.com/entry/HTML5-API-%EA%B0%95%EC%A2%8C-Canvas-1


HTML5 API - Canvas - 2

http://mohwaproject.tistory.com/entry/%E3%85%87%E3%85%81%E3%85%87


HTML5 API - Audio

http://mohwaproject.tistory.com/entry/HTML5-API-%EA%B0%95%EC%A2%8C-Audio


HTML5 API - Video - 1

http://mohwaproject.tistory.com/entry/HTML5-API-%EA%B0%95%EC%A2%8C-Video


HTML5 API - Video - 2

http://mohwaproject.tistory.com/entry/HTML5-Video-2





1. explorercanvas.js를 활용해 IE 브라우저에서 캔버스 사용하기



explorercanvas 라이브러리는 MS 가상 마크업 언어인 VML을 활용해 HTML5 요소인 canvas를 구현했다.


또한, 동적으로 canvas 요소를 생성하려면(document.createElemtn('canvas')) 아래 코드와 같이 생성된 객체를 G_vmlCanvasManager 객체로 캐스팅해 사용해야 한다는 제약을 가지고 있다.



window.onload = function () {

    if (document.all) {
                
        var ncanvas = document.createElement('canvas');
        document.body.appendChild(ncanvas);

        G_vmlCanvasManager.initElement(ncanvas);
        var ctx = ncanvas.getContext('2d');
        ctx.strokeStyle = '#000';
                
        ctx.strokeRect(0, 0, 100, 100);
                
    }
}