캔버스 생성과 그리기
===========

* « 이전
* 다음 »

이 강의는 게임 개발 캔버스 튜토리얼의 10단계 중 첫 번째 과정입니다. Gamedev-Canvas-workshop/lesson1.html에서 이 강의의 완성된 코드를 볼 수 있습니다.

게임의 기능들을 작성하기 전에, 게임 내부에 렌더링 하기 위한 기본 구조들을 HTML과 `<canvas>` 엘리먼트를 사용하여 만들어야 합니다.

게임의 HTML
--------

HTML문서 구조는 꽤 간단합니다. 게임은 `<canvas>` 엘리먼트에 렌더링됩니다. 여러분이 좋아하는 텍스트 에디터로 새로운 HTML 문서를 생성하여 index.html로 저장하고, 아래 코드를 추가하세요.


```html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Gamedev Canvas Workshop</title>
    <style>
 \* {
 padding: 0;
 margin: 0;
 }
 canvas {
 background: #eee;
 display: block;
 margin: 0 auto;
 }
 </style>
  </head>
  <body>
    <canvas id="myCanvas" width="480" height="320"></canvas>

    <script>
 // JavaScript 코드가 여기에 들어갈 것입니다.
 </script>
  </body>
</html>
```


`<head>` 에는 문자셋이 정의되어 있고, `<title>`과 몇가지 기본적인 CSS가 있습니다. `<body>`는 `<canvas>` 와 `<script>`를 포함하고 있습니다. `<canvas>`에는 게임이 렌더되고, `<script>`에는 JavaScript가 들어갑니다. `<canvas>`엘리먼트는 쉽게 참조하기 위해 id로 `myCanvas`를 갖고 있고, 480픽셀의 길이와 320픽셀의 높이를 갖도록 되어있습니다. 우리가 이 튜토리얼에서 작성하게될 모든 JavaScript 코드는 `<script>`와 `</script>` 태그 사이에 들어가게 됩니다.

캔버스 기본
------

실제로 `<canvas>`엘리먼트 위에 그래픽을 렌더링하기 위해서는 JavaScript로 참조할 수 있게 만들어야 합니다. 다음 코드를 여러분의 `<script>` 태그 다음에 추가하세요..


```js
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
```


`<canvas>` 엘리먼트에 대한 참조를 `canvas` 변수에 저장하였습니다. 그러고 나서는 캔버스에 그리기 위해 실질적으로 사용되는 도구인 2D rendering context를 `ctx` 변수에 저장하고 있습니다.

캔버스에 빨간색 네모를 그리는 짧은 예제 코드를 작성해봅시다. 바로 직전의 JavaScript 코드 아래에 다음 코드를 추가하고 `index.html을` 브라우저에서 열어 보세요.


```js
ctx.beginPath();
ctx.rect(20, 40, 50, 50);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
```


`beginPath()` (en-US)와 `closePath()` (en-US)메소드 사이에 모든 명령어가 들어갑니다. 우리는 `rect()` (en-US)를 이용해서 직사각형을 정의했는데, 처음 두 값들은 캔버스의 좌상단 모서리로 부터의 좌표를 의미하고, 나머지 두 값은 직사각형의 너비와 높이를 의미합니다. 위 코드에서 직사각형은 캔버스 좌측에서 20픽셀 떨어져있고, 캔버스 상단에서 40픽셀만큼 아래로 떨어져 있습니다. 그리고 너비와 높이는 각각 50픽셀로 설정되어 완벽한 정사각형으로 그려지고 있습니다. `fillStyle` (en-US)은 `fill()` (en-US)메소드에서 칠해질 색상 값을 갖게 됩니다. 위 코드에서는 사각형을 빨간색으로 칠하고 있습니다.

직사각형만 그릴 수 있는 것은 아닙니다. 이번에는 초록색 원을 그려보겠습니다. 아래의 코드를 여러분의 JavaScript의 마지막에 추가하고, 저장한 이후에 페이지를 새로고침 해보세요.


```js
ctx.beginPath();
ctx.arc(240, 160, 20, 0, Math.PI \* 2, false);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();
```


위 코드에서 볼 수 있듯이`beginPath()` (en-US)와 `closePath()` (en-US)메소드가 다시 나왔습니다. 그 사이에, 가장 중요한 부분인 `arc()` (en-US) 메소드가 있습니다. 이 메소드는 6개의 파라미터를 갖습니다.

* `원의 중심을 가리키는 x와 y좌표`
* 원의 반지름
* 시작 각도와 끝 각도(원을 그릴 때 시작과 끝이되는 각도이며, 라디안 값입니다.)
* 그리는 방향(false를 넣으면 시계방향으로 그려집니다. 기본 값이나 true를 넣으면 반 시계방향으로 그려집니다.) 이 파라미터는 옵션입니다.

`fillStyle` (en-US)속성은 이전과 조금 달라 보이는데, 이는 CSS에서 색상을 표현하는 여러가지 방법 중 하나입니다. 색상을 표현할 때, 16진수로 색상값을 표현하거나, 색상 키워드를 사용하거나, rgba() 함수를 사용하거나 그외에 다른 색상 메소드를 사용할 수 있습니다.

`fill()` (en-US)을 사용해서 원에 색상을 채울 수 있다면,`stroke()` (en-US)를 이용하면 원의 외곽선에 색상을 부여할 수 있습니다. 아래의 코드들도 여러분의 JavaScript에 추가해보세요.


```js
ctx.beginPath();
ctx.rect(160, 10, 100, 40);
ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
ctx.stroke();
ctx.closePath();
```


위 코드는 비어있는 파란색 외곽선으로 된 원을 그립니다. `rgba()` 함수의 알파 채널 값 때문에 파란색은 반투명하게 표현됩니다.

여러분의 코드와 비교해 보세요
----------------

JSFiddle에서 라이브로 실행되는 전체 코드입니다.

**참고:** **연습해보기**: 주어진 모양들의 크기와 색상을 변경해보세요.

다음 단계로
------

이제 우리는 기본적인 HTML을 설정하고, canvas에 대해 조금 배웠습니다. 두 번째 챕터로 넘어가서 게임에서 공을 움직이기위해 어떻게 해야 하는지 계속 알아봅시다.

* « 이전
* 다음 »