[Javascript] Canvas 로 그림그리기 기초

HTML5 에서 새로생긴 Canvas 라는 기능으로 화면에 직접 그림을 그려 그래픽 적 요소를 표현할 수 있다. 이는 node.js 에도 이식되어 간단하게 그래픽 처리를 할 수 있다.

<canvas id="textCanvas" width="500" height="500"></canvas>

canvas 엘리먼트를 생성해 보았다. 이렇게 생성한 canvas 에 Javascript 라는 붓으로 여러가지 그림을 그릴 수 있다. 다음과 같은 코드를 작성해보자.

<!DOCTYPE HTML>
<html>
  <head>
    <script>
      function draw() {
        var canvas = document.getElementById("testCanvas");
        var ctx = canvas.getContext("2d");
      }
    </script>
  </head>

  <body onLoad="draw()">
    <canvas id="testCanvas" width="500" height="500"></canvas>
  </body>
</html>

이와같이 소스코드를 작성했다면, 자바스크립트 부분을 살펴보자.

var canvas = document.getElementById("testCanvas");
var ctx = canvas.getContext("2d");

canvas 변수로 testCanvas 엘리먼트를 받아왔고, 받아온 testCanvas 의 Context 를 ctx 변수에 저장했다. Canvas의 Context에 명령을 주어 Canvas에 직접 무언가를 그릴 수 있다.

예시로 (50, 50) 의 위치에 가로 세로 200px 짜리 검정색 사각형을 그려보자. 위의 자바스크립트 다음 부분에 이 소스코드를 작성하여 넣는다.

ctx.fillStyle = "rgb(0,0,0)";
ctx.fillRect (50,50, 200, 200);

스크린샷 2015-12-13 오전 3.39.42

검정색 사각형이 그려져 있는 모습을 확인할 수 있을 것이다. 소스코드를 다음과 같이 약간 수정하면 테두리만 존재하는 사각형을 그릴 수 있을 것이다.

ctx.fillStroke (50,50, 200, 200);

한번 선을 그어보자. Path 를 하나 그어줄 것이다.

ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(250,250);

붓을 들고 (50, 50) 에서 (250, 250) 까지 가상의 선(Path)을 그어보았다. 그 경로를 실체화 시켜주자.

ctx.stroke();

생성한 Path 에 Stroke 를 그어준다.

스크린샷 2015-12-13 오전 3.59.11

 

이렇게 Canvas 는 Context 를 가져와서 그 Context 를 이용해서 쭉쭉 그어주면 된다. Canvas 사용을 보조하는 플러그인은 여럿 있겠지만 일단 그냥 javascript 로 작성하면서, 기초를 키우자.

Canvas 튜토리얼 : https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes