[HTML] Graphics

 

 

 

HTML의 canvas / svg 태그를 사용하면 웹 페이지 내부에 그림을 그릴 수 있다.

 

 

 

canvas 태그를 사용해 지정한 위치에 선을 긋는 간단한 예시이다.

canvas 태그를 사용할 때는 자바스크립트를 사용해서 그림을 그린다.

 

간단하게 선을 긋는 예시 뿐만 아니라 이미지, 원, 색상 등 다양한 그림을 표현할 수 있으니 필요할 때 찾아서 사용하자.

 

 

 

 

 

 

svg 태그를 사용해 사각형을 그리는 예시이다.

자바스크립트 대신 HTML 태그를 사용해서 그림을 표현한다.

태그 기반이기 때문에 그림의 일부를 수정할 때 자바스크립트의 DOM으로 접근한다.

 

svg는 태그를 사용해 그림을 표현하는구나 ~ 정도로만 머리에 넣고 이 정보를 인덱스로 필요할 때 찾아서 사용하자.

 

 

 

 

 

canvas는 픽셀 단위로 그림을 표현해 확대 시 이미지가 깨질 수 있지만, svg는 점에 대한 정보를 가지고 있어 확대해도 이미지가 깨지지 않는다. (그림을 다시 그리는 작업이 있어 시간은 오래 걸릴 수 있다)

 

canvas는 자바스크립트의 메서드를 사용해 그림을 표현하고 svg는 태그 기반으로 그림을 표현한다.

 

화면이 잘 변하지 않는 경우 canvas를 사용하고, 해상도가 중요한 경우 svg를 사용하는 등 상황에 적합한 방법을 사용하자.