html 그리기 Svg / Canvas

SVG

데이터 전달용을 목표로 한 XML를 기반으로 한 언어로써

벡터를 기반으로 한 그래픽을 표현하는 언어이다.

 

 

벡터 : 기준좌표로부터 방향과 크기를 가진 물리량

벡터

즉 선을 그으면 A(x,y)위치 / 각도 / 이동량 3개로 표현 할 수 있는 것이다.

 

이렇게 표시함으로써 기존의 이미지 표시와는 다르게

다양한 해상도에서 고해상도 이미지를 구현 할 수 있다.

(다시 그리면 되니깐!!)

 

다만 이것도 데이터이기에 표시해야하는 데이터 수가 많아질수록 시간이 증가한다.

해상도가 자주 변하지만 데이터는 잘 안변하는 네비게이션 어플이 대표적인 예이며,

해상도는 변하지 않지만 복잡한 이미지가 많은 프로그램에서는(게임 어플이라던가) 부적절하다.

<svg width="500" height="500" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">
<!--
  캔버스 넓이        높이            최소비  최대비
-->
  <circle cx="60" cy="60" r="50"/>
<!--
   캔버스 안 백터
   원의중심 x좌표 y좌표 반지름
-->
</svg>

최소비랑 최대비는 간단한데 좌측 최상단이 0,0이고 우측 최하단이 120,120이다.

x / 최대비 - 최소비 * 100 = 좌표 위치

60(cx) / 120(Max x) - 0(Min y) * 100= 50%니깐

원은 중앙에 있다.

Canvas

JavaScript를 통하여 이미지 구현 가능하며, pixel을 기반으로 구현한다.

이미지 구현능력은 뛰어나나, 이미지를 하나하나 그리므로 변화하는것에 약하다.

(컴퓨터란 아이가 애니메이션을 한장한장 손으로 그린다고 생각하면 된다.)
PNG 또는 . JPG로 생성 된 이미지를 저장할 수 있다.

(우클릭해서 다운받기 하면 된다)