HTML5 캔버스(canvas)

HTML5 Canvas를 이용해서 도형들을 그릴 수 있습니다.

다음은 캔버스를 이용해서 원을 그리는 코드입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>캔버스</title>
</head>
<body>
  <div id="color" style="width: 300px; height: 300px;"></div>

  <canvas id="myCanvas" width="300" height="300" style="border: 1px solid #d3d3d3;"></canvas>
  <script>
    let c = document.getElementById("myCanvas");
    let center_x = c.width / 2;
    let center_y = c.height / 2;
    let ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.arc(center_x, center_y, 30, 0, 2 * Math.PI);
    ctx.stroke();
  </script>
</body>
</html>

애니메이션

Canvas vs SVG

SVG는 DOM 객체 형식으로 추가되어서 Canvas보다 그래픽 처리 속도가 느리게 느낄 수 있다.

One benefit of canvas is that it doesn’t have a DOM! It allows you to animate thousands of objects without that overhead – which is ideal for games. [2]

SVG의 장점은 다른 응용 프로그램에서 SVG 그래픽을 만들 수 있다는 것이다. 반면에 Canvas는 자바스크립트만 사용해서 제어할 수 있다는 것이다. 게임 용도로는 canvas를 이용하는 것이 좋고 그래프와 차트를 만들려고 할 때는 SVG를 사용하는 것이 좋다.

Canvas와 SVG의 차이점

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

참조 사이트

[1]간단한 애니메이션 원리 https://www.kirupa.com/html5/creating_simple_html5_canvas_animation.htm
[2]캔버스와 SVG 사용 https://www.sitepoint.com/canvas-vs-svg-choosing-the-right-tool-for-the-job/