HTML 엘리먼트: canvas 공부

※ 필자는 초보자입니다.

※ 틀린 내용은 언제든지 피드백 부탁드립니다.

 

<canvas> ?

"HTML 엘리먼트인 <canvas>는 캔버스 스크립팅 API 또는 WebGL API와 함께 사용해서 그래픽과 애니메이션을 그릴 수 있다."

 

쉽게 정리를 하자면 <canvas>는 웹 페이지에 그래픽을 그리는데 사용을 하는 요소이다.

다만, <canvas>라는 엘리먼트는 그래픽의 컨테이너일 뿐이고, 실제로 그래픽을 그리는 것은 JavaScript가 해야한다. (CSS 아님)

즉, JavaScript를 사용한다는 말이다.

(참고자료 : 출처1, 출처2)

 

 

사용 방법

우선 HTML 문서에 <canvas> 엘리먼트를 추가해야한다.

/* 예제 */
<canvas id="canvas" width="300" height="300">
  캔버스의 내용을 설명하는 대체 텍스트
</canvas>

 

width, height 어트리뷰트(attribute; 속성)이 있으며, 기본값은 다음과 같다.

• width 기본값 : 300
• height 기본값 : 150

 

📌 참고사항1.

캔버스의 표시 크기(컨테이너 크기)는 CSS로도 수정할 수 있지만

CSS를 사용할 경우 렌더링 과정에서 CSS 크기에 맞추기 위해 이미지의 크기를 조절하기 때문에

최종 그래픽이 변형될 수 있다고 한다.

=> 따라서, width와 height 속성을 직접 사용하는 것이 좋다고 한다.

 

📌 참고사항2.

전역 속성 중 하나인 id 속성을 사용해주는 것이 좋은데, 스크립트 내에서 구분을 쉽게 해 줄 수 있기 때문이라고 한다.

 

📌 참고사항3.

<canvas> 태그를 지원하지 않는 오래된 브라우저를 위해 대체 컨텐츠를 제공해야하는데,

이때는 태그의 안에 내용을 입력하면 된다.

(참고자료 : 출처1, 출처2)

 

캔버스 객체 얻기

(이 글에서는 자바스크립트를 이용할 것임)

일단 가장 기본이 되는 HTML 문서에 <canvas> 태그를 넣는 것은 성공했다.

<canvas id="game-board" width="100" height="300"></canvas>

 

이제 자바스크립트에서 그래픽을 그리기 위해서 캔버스 객체를 얻어오자.

이때 getElementById 혹은 querySelector를 사용했다. (이 두 메서드에 대한 설명은 MDN 공식 사이트를 참고...)

const gameBoard = document.getElementById("game-board");
// 또는 const gameBoard = document.querySelector("#game-board");

(참고자료 : 출처3)

 

 

렌더링 컨텍스트 (Rendering Context) ?

캔버스 객체를 가져온 것은 좋은데, 이것만으로는 도형을 그릴 수 없다고 한다.

실제로 렌더링(*)을 하려면 캔버스 객체로부터 렌더링 컨텍스트**(Rendering Context)를 얻어야 한다.

=> 쉽게 말해서 캔버스는 종이, 렌더링 컨텍스트는 색연필이라고 한다.

 

렌더링 컨텍스트는 getContext() 메서드를 이용해서 얻어올 수 있다.

2D 그래픽인 경우에는 인자로 "2d"를 전달하면 된다.

=> 여기에서 얻어온 이 렌더링 컨텍스트는 CanvasRenderingContext2D라는 인스턴스이다.

참고로, "2d" 외에도 "webgl", "webgl2", "bitmaprenderer"를 값으로 가질 수 있다. (참고자료: 출처4)

const gameBoard = document.getElementById("game-board");
// 또는 const gameBoard = document.querySelector("#game-board");

// context = ctx
const ctx = gameBoard.getContext('2d');

 

console.dir을 이용해서 gameBoard와 ctx를 출력해보면 다음과 같다.

 

 

* 렌더링? 

아주 쉽게 설명하면, 2차원이나 3차원 장면을 컴퓨터 프로그램을 이용해서 사진이나 영상으로 만들어내는 과정을 말한다.

여기에서도 비슷한 의미로 사용된다.

HTML, CSS, JavaScript 등의 코드를 잘(?) 해석해서 브라우저에서 보이도록 만들어내는 과정이라고 볼 수 있다.

 

** 컨텍스트?

우리말로 해석하면 "문맥"이나 "전후관계"라고 한다.

10초짜리 드라마를 처음 3초를 보여주고, 5초를 가린 후, 마지막 장면 2초를 보여줬다고 가정하자.

그리고 가렸던 5초의 장면 동안 무슨 일이 있었는지 유추해보라고 한다면,

우리는 앞의 3초 동안의 장면에서 나눴던 대사, 상황 등과 뒤의 보여준 2초 동안 발생한 상황, 대사 등을 잘 분석하고

두 정보를 어떻게든 연결해서 가렸던 5초를 유추할 것이다. => 이렇게 문맥을 파악하게 된다.

프로그래밍 세계에서의 컨텍스트(문맥)은 "무언가를 제어하기 위한 제어 정보"를 말한다.

즉, 예시로 들었던 드라마를 기준으로 생각해보면,

앞 장면에서 있었던 대사/상황과 뒤 장면에서 있었던 상황/대사 등 => 이런 정보를 말한다 (=가려진 5초를 파악하기 위한 필요한 정보)

따라서, 렌더링 컨텍스트는 "렌더링 하기 위한 제어 정보"를 말한다.

 

(참고자료: 출처1, 출처3)

 

 

렌더링 하기

렌더링 컨텍스트를 이용해서 캔버스에 그림을 그리면 된다.

앞에서 보았던 메서드와 프로퍼티를 이용하게 된다.

/* 예시 */
ctx.fillStyle = "rgb(200, 200, 200)"; // 색상 채우기
ctx.fillRect(10, 20, 200, 200); // 직사각형 그리기

 

여기까지가 기본적인 사용 방법이다.

 

활용1_그리드 혹은 좌표 공간(coordinate space)

이제 캔버스를 잘 활용해야하는데, 이를 위해 필요한 개념들을 공부해보자.

출처: MDN Web Docs

기본적으로 그리드의 1단위는 캔버스의 1픽셀과 같다. 그리드의 원점은 좌측 상단의 (0,0)이다.

이 원점을 기준으로 모든 요소들이 위치된다.

 

예를 들면 다음과 같은 메서드를 이용할 수 있다.

 

📌 fillRect(x, y, width, height) 메서드

직사각형을 그린다.

 

📌 strokeRec(x, y, width, height) 메서드

직사각형 윤곽선을 그린다.

 

활용2_경로 그리기

경로는 점들의 집합을 말한다. 도형을 이루는 하위경로(선, 아치 등)들의 집합으로 이루어져 있다고 한다.

다음과 같은 단계를 거쳐서 만들어진다.

1. 경로를 생성한다. = beginPath() 메서드 사용
2. CanvasRenderingContext2D를 사용하여 경로상에 그린다.
3. 경로가 한번 만들어졌다면 경로를 렌더링 하기 위해서 윤곽선을 그리거나 도형 내부를 채울 수 있다. = stroke, fill 등 메서드

 

📌 beginPath() 메서드를 한 직 후(혹은 캔버스를 새로 생성한 직후) path가 비어있게 되는데

이때에는 첫 경로 생성 명령은 실제 동작과 상관없이 moveTo()로 여겨지게 된다.

따라서, 경로를 초기화한 직후에는 항상 명확하게 시작 위치를 설정해두는 것이 좋다.

const gameBoard = document.getElementById("game-board");
const ctx = gameBoard.getContext('2d');

ctx.beginPath();
ctx.lineTo(100, 100); //moveTo로 여겨짐
ctx.lineTo(200, 200);
ctx.lineTo(300, 100);
ctx.fill();

 

📌 경로가 그려지는 위치를 설정한 후에는 closePath() 메서드를 호출해야한다.

(현재 점 위치와 시작점 위치를 직선으로 이어서 도형을 닫는 역할을 한다)

도형이 닫혔거나 한 점만 존재한다면 아무것도 일어나지 않으며,

fill 메서드 호출 시 열린 도형은 자동으로 닫히므로 closePath를 호출하지 않아도 된다.

 

활용3_호 그리기

arc 메서드를 이용한다.

- 첫번째 인자는 x 좌표, 두번째 인자는 y 좌표, 세번째는 호의 반경(반지름),

   네번째 인자는 시작되는 각도(양의 x축에서 측정된다), 다섯번째 인자는 호가 끝나는 각도이다.

- 참고로, 네번째와 다섯번째 인자는 라디안 기준이다. (360도 아님)

 

즉, 아래의 코드는 (100, 75) 좌표에 반지름이 50인 원을 그릴 건데, 시작되는 각도는 0라디안이고,

끝나는 각도는 파이(2분의 1 라디안)이다.

const gameBoard = document.getElementById("game-board");

const ctx = gameBoard.getContext('2d');

ctx.beginPath();
ctx.arc(100, 75, 50, 0, Math.PI);
ctx.stroke();

 

이 외에도 굉장히 굉장히 다양한 메서드가 있으니 필요할 때 찾아서 쓰자..

https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Basic_usage

캔버스(Canvas) 기본 사용법 - Web API | MDN

 

 

---

출처1 : https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Basic_usage

캔버스(Canvas) 기본 사용법 - Web API | MDN

출처2 : https://www.w3schools.com/html/html5_canvas.asp

HTML Canvas

 

출처3 : http://www.florakid.com/florakid_lib/sub/html5/canvas_basic.html

florakid_lib

 

출처4 : https://developer.mozilla.org/ko/docs/Web/API/HTMLCanvasElement/getContext

HTMLCanvasElement.getContext() - Web API | MDN

 

출처5 : https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes

캔버스(canvas)를 이용한 도형 그리기 - Web API | MDN