Rev. 2.73

supermario.gif

Jacob Seidelin씨의 또 다른 작업이다. 그는 Canvas 엘리먼트와 자바스크립트로 횡스크롤 게임인 슈퍼 마리오를 구현했다. 600여개의 Sapn과 Canvas 엘리먼트로 구성된 이 게임은 놀랍게도 HTML과 스타일시트 그리고 자바스크립트 외에 별다른 외부파일을 전혀 사용하지 않는 특징을 가진다. 척보기에도 다양한 애니메이션과 배경에 사용된 많은 이미지를 포함하고 있을 것으로 보이지만 전혀 그렇지 않다. 셀 하나하나가 모두 Canvas 엘리먼트에서 실시간으로 생성된 그래픽이다. 심지어 배경으로 흘러나오는 배경음 역시 base64 data URI를 이용하여 MIDI음악을 재생한다. 놀랍게도 Canvas를 지원하지 않는 IE에서는 4만5천 여개의 Span태그로 그래픽을 그려내기 때문에 IE에서 즐기는데에도 문제가 없다. 한 일본인이 테이블 노가다로 구현한 슈퍼마리오와는 차원이 다르구나, 그저 놀라울 뿐이다.

Comments

firejune.png

Jacob Seidelin씨는 Canvas 엘리먼트에 그려진 정보를 이미지로 저장해주는 라이브러리인 Canvas2Image를 만들었다. 서버의 리소스를 차지하지 않고 자바스크립트만으로 base64 Data URI를 즉석해서 생성하여 PNG, BMP, JPEG 포멧으로 디스크에 저장할 수 있게 한다. 단순히 벡터(vector) 그래픽의 표현 수단에 불과했던 Canvas 엘리먼트를 저장 수단으로 활용한 멋진 역발상 사례다. 이 라이브러리를 응용하면 정말로 Canvas 기반은 웹 드로잉 애플리케이션을 만들 수도 있겠다. 비록 IE계열 브라우저에서 Canvas 엘리먼트를 철저하게 지원하지 않는 덕분에 현설성이 매우 떨어지기는 하지만 말이다.

var strDataURI = oCanvas.toDataURL();   
// returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."  

Comments