웹에 그림그리는 4가지 방법

: Canvas, SVG, CSS, and direct DOM animation. 

There are four ways to draw things on the web: Canvas, SVG, CSS, and direct DOM animation. Canvas differ from the other three:

SVG: SVG는 그림을 그리는 vector API 이다. 각 그림은 한개의 object를 갖는다.  그 object에 event handler를 연결할 수 있고 줌을 할때 캔버스에서 부드럽게 픽셀로 변환되어질 수 있다. 

CSS: CSS은 사실은 styling DOM elements에 관한 것이다. 그래서 캔버스에 그릴 수 있는 DOM objects가 없고,

      DOM object를 꾸밀 수 있는CSS가 없다.

      css는 사각형 영역에만 영향을 미치고 경계와 배경 색깔을 설정할 수 있다.

DOM animation: The DOM, Document Object Model은 화면에 있는 모든 object를 정의한다.,

      DOM animation은 CSS나 JavaScript로 objects를 움직일 수 있고 캔버스로 움직이는 것보다

      부드럽게 움직일 수 있으나 구현은 웹 브라우저에 따라 다르다.

Canvas : 위의 다른 것 낮은 수준으로 그림에 더 많은 제어를 해야하나 적은 메모리를 사용한다.  즉 적은 메모리를 사용하는 만큼 많은 코드가 필요하다는 것이다.

 

브라우저 지원

Safari	3.0+
Chrome	10+
Opera	9+
FireFox	4.0+
Internet Explorer	9.0+

 

핸드폰 지원

iOS	all
webOS	all
Android	2.0+
BlackBerry	Playbook and OS 6.0+
Windows Phone 7	none