<canvas> 태그와 다루는 법

들어가기 전

마우스 포인터를 따라가게 하는 코드를 한번 구현해보고 싶어서 예시 코드를 찾게 되었고 그 중에 canvas 태그를 이용하여 하는 방법을 알게 됐다. 그래서 오늘 알아볼 것은 canvas 태그와 어떻게 사용하는지 알아보려고 한다.

 

이 글을 읽는 사람들 대부분은 이미 HTML, CSS 에 대해서 어느 정도 알 것이라고 생각한다. 처음에 이 글을 작성할 때, HTML의 카테고리로 넣을 것인지 CSS에(?) 넣어야 하는지 잠시 생각하게 되었는데, 결국에는 JavaScript 카테고리에 넣으려고 한다. 그 이유는 canvas 태그는 자바스크립트로 자주 DOM 조작을 하는 태그이기 때문이다. 

 

canvas 태그가 무엇이며 어떻게 쓰는지 알게 된다면 이 말을 납득할 수 있을것이라 생각한다. 바로 알아보자.

 

<canvas> 란?

HTML 태그 중 하나로 JavaScript를 이용하여 다양한 그래픽 요소를 만들 수 있게 도와준다.

(마땅한 표현을 찾지 못해서 일단 이렇게 적어둠)

도형을 그리는 것, 데이터의 시각화, 애니메이션, 웹 게임 등 사용하기에 따라 다양한 활용이 가능한 것이 특징이다.

실제 그래픽이나 애니메이션, 기타 시각적 이미지는 Canvas API나 WebGL API를 사용하여 그릴 수 있다.

 

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

Canvas API - Web API | MDN

https://developer.mozilla.org/ko/docs/Web/API/WebGL_API

WebGL - Web API | MDN

 

 

Canvas API를 이용한 사용법

 

1. canvas 태그를 만든다.

(✎ 보통 canvas는 DOM 조작을 하기 때문에 id를 설정하는 것을 권장한다.)

<canvas id="myCanvas">여기는 canvas 안에 들어갈 내용입니다.</canvas>

<!--canvas를 지원하지 않는 브라우저에서는 캔버스 대신 태그 안에 있는 내용이 표시된다.-->

 

2. JS를 이용하여 엘리먼트 선택

// HTML에서 id가 "myCanvas"인 canvas 요소 가져오기
const myCanvas = document.getElementById('myCanvas');

// 가져온 canvas에서 2D 그리기 컨텍스트를 얻어오기 (이걸로 그림을 그릴 수 있다.)
const ctx = myCanvas.getContext('2d');

// 기본 그리기 방식을 설정 ("source-over"는 기존 캔버스 위에 새로 그리는 방식, 기본값)
ctx.globalCompositeOperation = 'source-over';

// 빨간색 채우기 스타일 설정
ctx.fillStyle = 'red';

// (10, 10) 위치에 가로 100px, 세로 100px 크기의 빨간색 사각형을 그림
ctx.fillRect(10, 10, 100, 100);

// 파란색 채우기 스타일 설정
ctx.fillStyle = 'blue';

// (40, 40) 위치에 가로 100px, 세로 100px 크기의 파란색 사각형을 그림
ctx.fillRect(40, 40, 100, 100);

// 출력은 빨간색 사각형 위에 겹쳐서 그려진것을 볼 수 있다.

 

출력화면