HTML5는 브라우저에 내장한 비디오 플레이어 기능을 통해 비디오를 보여주고 제어를 위해 필요한 다양한 UI를 태그와 자바스크립트 모두를 통해 처리할 수 있도록 지원하고 있다. 또한 HTML5의 캔버스 기능은 브라우저에서 2D 그래픽을 지원하는 기능으로 SVG(Scable Vector Graphic)와는 다르게 픽셀단위로 2D 그래픽을 그릴 수 있는 기능이다. 어떤 개발자들은 이러한 캔버스 기능을 이용해서 둠과 유사한 3D 게임을만들어 공개한 것도 인터넷에서 찾아볼 수 있다

최근 주요 브라우저들은 HTML5의 비디오 택그와 캔버스 기능을 대부분 지원하고 있기 때문에 이들을 활용한 다양한 시도들이 있는데 이들 중 상당히 재밌는 특수효과를 개발한 사례가있어서 소개하고자 한다. 이는 HTML5 비디오 태그로 정의된 미디어가 보여질 때 이들의 픽셀을 캔버스로 매핑하고 마우스가 보여지는 비디오의 특정 위치 클릭되면 그 위치를 기반으로 주변이 폭발하는 효과를 만들었다. 이는 HTML5의 비디오 태그와 캔버스 기능을 조합하여 전혀 색다른 효과를 만들 수 있다는 예를 보여준다는 차원에서 상당히 흥미롭다.



직접 데모를 보고 싶은 분은 아래 링크를 클릭하여 시험해 보기 바란다. 데모를 실행해 볼때 HTML5의 비디오 및 캔버스 기능을 지원하는 크롬, 오페라, 파이어폭스를 사용해야 한다. 참고로 IE에서는 동작하지 않는다.


 - 비디오 폭파(destruction) 데모 사이트 (HTML5 Video 태그와 캔바스 API 활용하여 개발)

  

(원문): Blowingup HTML5 video and mapping it into 3D space

저작자 표시 비영리 변경 금지
신고
Posted by 이원석(wonsuk73@gmail.com)

댓글을 달아 주세요

  1. article 2012.03.26 15:19 신고  댓글주소  수정/삭제  댓글쓰기

    근데... 이 추운날씨에옷이 도입지... ^.^

기존의 HTML 환경에서는 그래프를 그리기 위해서 주로 이미지를 이용해서 표현을 해야했다. 하지만 이미지를 이용하는 경우 동적으로 변하는 데이터를 그래프로 표현할 때 서버에서 동적으로 이미지를 만들어서 붙여주어야하고, 다양한 단말을 지원하기 위해서는 이미지의 크기를 최적화시키기 위한 노력이 필요했다. 이런 이유로 어떤 그래프는 선명하지 하지 않고 부자연스럽게 보여지는 경우가 많았다.


그러나 차세대 HTML 표준인 HTML5는 2D 그래픽을 지원하기 위한 기능으로 캔바스(Canvas)와 SVG(Scable Vector Graphic)를 지원하여 그래프를 자연스럽게 표현할 수 있다. 본 글에서는 캔바스 기능을 이용하여 쉽게 다양한 그래프와 챠트를 그려주는 유용한 툴인 jQuery Visualize를 소개한다. jQuery를 앞에 붙인 이유는 Visualize가 jQuery의 플러그인 프로그램이기 때문이다.


jQuery Visualize는 자바스크립트와 HTML5 캔바스(Canvas) 엘리먼트를 이용해 멋진 막대 그래프, 선 그래프, 영역 또는 원 챠트를 그릴 수 있도록 지원해주는 jQuery 플러그 인(Plug-in) 프로그램이다. 그래프로 표현이 필요한 데이터를 HTML 테이블을 이용하여 정리하면, Visualize 플러그인은 HTML 테이블의 정보를 분석한 후 HTML5 캔바스 엘리먼트와 API를 이용해서 다양한 형태의 그래프를 그려준다.


아래는 jQuery Visualize를 이용한 간단한 예를 보여준다. 아래의 테이블의 정보를 분석하여 테이블 아래에 있는 다양한 형태의 그래프를 그려준다.





jQuery Visualize 툴에 대한 세부적인 사용방법은 아래 원문의 문서를 참고하면 된다.


(참고문헌) Update to jQuery Visualize: Accessible Charts with HTML5 from Designing with Progressive Enhancement

저작자 표시 비영리 변경 금지
신고
Posted by 이원석(wonsuk73@gmail.com)

댓글을 달아 주세요

  1. yonupark 2011.10.06 10:12 신고  댓글주소  수정/삭제  댓글쓰기

    안녕하세요 jquery visualize로 차트를 개발하고 있습니다.

    차트 소개글을 보고 이렇게 들어와 그래프 관련 하나를 감히 여쭙고자 글을 올립니다.

    jquery visualize가 다 좋은데 음수 표현에 문제가 있습니다.

    음수표현할 때 Y축에 0(영)이 기준이 되지않습니다.

    혹시 이 부분에 대해서 답변을 주실 수 있으신지요??

    감사합니다.

  2. ssonacy 2012.01.09 08:36 신고  댓글주소  수정/삭제  댓글쓰기

    혹시 이건 무료로 사용할수 있는것입니까 ?

  3. water cooling guide 2012.02.17 12:30 신고  댓글주소  수정/삭제  댓글쓰기

    인이컴백하면서바나나다이어트로 저이가되었네요.

  4. This Link 2012.03.26 02:13 신고  댓글주소  수정/삭제  댓글쓰기

    진실을 조용 슴 새기라.'것또한 나리라.

  5. pandora style beads 2013.04.22 03:58 신고  댓글주소  수정/삭제  댓글쓰기

    해도 과언이 아니다

  6. portefeuille longchamp 2013.04.24 03:35 신고  댓글주소  수정/삭제  댓글쓰기

    생산되지 않은 겨울철에 주로

  7. online ocr service 2014.01.12 23:50 신고  댓글주소  수정/삭제  댓글쓰기

    분석의 시작 부분에 참조 표준을 분석. 표준 농도는 공지 된 장비를 교정과 정확성을 확인하기 위해 사용된다. 모든 샘플은 표준의 작동 범위 내에 있어야합니다. 그렇지 않다면 시료는 희석 될 필요 또는 표준의 농도는 증가 하였다.

  8. handwriting ocr 2014.01.19 00:24 신고  댓글주소  수정/삭제  댓글쓰기

    해서는 이미지의 크기를 최적화시키기 위한 노력이 필요했다. 이런 이유로 어떤 그래프는 선명하지 하지 않고 부자연스럽게 보여지는 경우가 많았다.

  9. infomercial production 2014.02.03 05:29 신고  댓글주소  수정/삭제  댓글쓰기

    이 게시물은 HTML5 Tsanvas 나 관심에 관한 것입니다. 이런 좋은 일을 주셔서 감사합니다. 그것을 유지하고 당신에게 행운을 빕니다.

  10. massagem 2014.05.01 21:45 신고  댓글주소  수정/삭제  댓글쓰기

    그렇지 않다면 시료는 희석 될 필요 또는 표준의 농도는 증가 하였다.

  11. massagem 2014.05.09 01:10 신고  댓글주소  수정/삭제  댓글쓰기

    그렇지 않다면 시료는 희석 될 필요 또는 표준의 농도는 증가 하였다.

  12. massagista SP 2014.05.14 12:52 신고  댓글주소  수정/삭제  댓글쓰기

    기고있다는 점을 제외하고 말을해야할지 모르겠어요. 블로그가 멋지 네요.



티스토리 툴바