[HTML] 그래픽

Canvas와 SVG 비교

작업 환경에 따른 비교

- 화면이 작거나, 픽셀 수가 많을 경우(>10k): canvas 추천

- 화면이 크거나, 픽셀 수가 적을 경우(<10k): svg 추천

작업 종류에 따른 비교

-복잡하고 고성능의 애니메이션(animation) 작업이나 동영상 조작의 작업: canvas 추천

- 고품질의 문서 작업이나 정적 이미지의 조작 작업: svg 추천

Canvas와 SVG의 차이점

Canvas	SVG
픽셀(pixel) 기반	모양(shape) 기반
단일 HTML 요소	DOM의 일부분이 되는 다중 그래픽 요소
스크립트(script)를 통해서만 수정할 수 있음.	스크립트(script) 및 CSS를 통해서도 수정할 수 있음.
그래픽이 주작업인 게임에 적합함.	렌더링 영역이 넓은 응용 프로그램(application)에 적합함.

Canvas

- canvas는 그래픽ㅇ르 위한 container 역할만을 수행. 그래픽을 그리기 위해서는 JavaScript 같은 스크립트 언어 필요

- canvas 요소는 테두리와 컨텐츠가 없는 단순한 사각형의 공간. style 속성을 사용하여 크기 설정 필요

- script에서 canvas에 접근하기 위해서는 요소의 id 속성을 이용

<canvas id="drawCanvas" style="width:300px; height:200px; border: 1px solid #993300;">
    canvas 요소를 지원하지 않습니다!!
</canvas>

- 사각형 그리기

함수	설명
fillStyle()	사각형 영역을 채울 색상을 설정. 색상값만을 사용할 수도 있고, 투명도까지 명시
fillRect()	사각형을 그리기 시작할 시작점의 x, y좌표와 사각형의 너비, 높이 등을 설정
strokeRect(x, y w, h)	사각형 영역에 테두리를 그릴 때 사용
clearRect()	지정된 사각형 영역을 투명하게 만듦

context.strokeRect(10, 10, 250, 130);
context.fillStyle = "rgba(255,0,0,1)";
context.fillRect(20, 20, 200, 100);
context.clearRect(30, 30, 150, 50);

- 선 그리기

함수	설명
moveTo()	선이 시작될 좌표를 설정
lineTo()	선이 끝나는 좌표를 설정 lineTo() 함수를 연속적으로 사용할 때의 시작 위치는 이전 선 그리기가 끝난 위치로 자동 설정
stroke()	선 그리기 시작

context.moveTo(0, 0);
context.lineTo(300, 200);
context.lineTo(150, 0);
context.lineTo(0, 0);
context.fillStyle = "#0099FF";
context.fill();
context.stroke();

- 원 그리기

함수	설명
beginPath()	도형 그리기를 시작
arc(x, y, r, start_rad, end_rad)	원의 중심 좌표와 반지름, 원을 그리기 시작할 시작 위치와 종료 위치의 좌표, 그리는 방향 등을 설정
closePath()	도형 그리기를 마침

context.beginPath();
context.moveTo(100, 100);
context.arc(100, 100, 120, 0, 45 * Math.PI / 180);
context.closePath();
context.stroke();

- 텍스트 그리기

함수	설명
font()	텍스트의 크기, 폰트(font)와 색상 등을 설정
fillText(content, x, y)	텍스트의 내용과 텍스트를 그리기 시작할 시작 위치의 좌표를 설정
strokeText()	테두리만 있는 텍스트를 그릴 때 사용

context.font = "40px Arial";
context.fillText("CANVAS", 50, 90);
context.strokeText("HTML5", 80, 150);

- 그래디언트 그리기

- 생성된 그래디언트는 fillStyle이나 strokeStyle 속성을 이용하여 그림

함수	설명
createLinearGradient(start_x, start_y, end_x, end_y)	선형 그래디언트를 그리기 시작할 시작 위치와 종료 위치의 좌표를 설정
createRadialGradient(start_x, end_y, start_r, end_x, end_y, end_r)	원형 그래디언트를 그리기 시작할 큰 원의 중심 좌표, 반지름과 그래디언트가 끝날 작은 원의 중심 좌표, 반지름 등을 설정
addColorStop()	그래디언트의 색을 설정. 시작점인 0에서부터 종료점인 1까지 다양한 색 지정이 가능

var gradient = context.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, "#FFCC00");
gradient.addColorStop(1, "#FFCCCC");
context.fillStyle = gradient;
context.font = "45px Arial black";
context.fillText("CANVAS", 15, 120);

var gradient = context.createRadialGradient(100, 100, 200, 150, 150, 30);
gradient.addColorStop(0, "black");
gradient.addColorStop(1, "white");
context.fillStyle = gradient;
context.fillRect(0, 0, 300, 300);

- 이미지 그리기

함수	설명
drawImage(url, x, y)	canvas 요소에 그릴 이미지의 주소와 이미지가 그려질 시작 위치를 설정함.

<p><button onclick="drawImage()">이미지 그리기</button></p>

<script>
  function drawImage() {
    var srcImg = document.getElementById("Apple");
    context.drawImage(srcImg, 10, 10);
  }
</script>

SVG

- svg 요소는 Scalable Vector Graphics를 의미

- XML 기반의 W3C 그래픽 표준 권고안

- canvas로는 벡터 이미지 표현이 불가능하지만 svg는 픽셀의 영향을 받지 않는 벡터 이미지를 표현

- 도표나 그래프 등 벡터 기반의 다이어그램을 표현