그래픽

* HTML에서의 그래픽

- 지금까지는 HTML에서 Flash와 같은 애드온을 사용하지 않는 한, 서버의 처리를 반영한 자유로운 도형을 표시할 수 없었음.

- HTML5에서 등장한 canvas와 SVG는 애드온 없이 서버의 처리에 따라 도형을 그릴 수 있음.

- canvas나 SVG를 이용하면 그래프나 도형을 손쉽게 웹 페이지에 표시할 수 있음.

 

* canvas

- canvas는 웹 페이지 안에 비트맵 이미지(픽셀이라 불리는 점의 집합체)를 그림.

- 도형을 그리는 방법은 HTML 측에 그림을 그릴 캔버스가 될 canvas 요소를 준비해 두고 JavaScript를 사용하여 그림.

 

1. HTML에서 캔버스를 준비한다.

<canvas id="canvas1" width="300" height="300">

 

2. JavaScript로 그린다.

var canvas = document.getElementById("canvas1");

var cvs = canvas.getContext("2d");

cvs.fillStyle="#aaaaaa"

cvs.fillRect(10, 10, 200, 200);

cvs.fillStyle="#eeaaaa";

cvs.fillRect(20, 20, 210, 210);

 

 

* SVG

- SVG는 웹 페이지 안에 벡터 이미지(선과 면으로 구성된 이미지)를 그림.

- 원래 XML이나 XHTML에서 이용하던 것을 HTML5에서 채택함.

- HTML5에서는 svg 요소를 HTML에 직접 포함시킬 수 있음.

 

HTML 안에서 svg 요소 이용하기

<svg>

<rect x="10" y="10" width="200" height="200" fill="#aaaaaa" />

<rect x="20" y="20" width="200" height="200" fill="#eeaaaa" />

</svg>

 

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)