HTML canvas 사용방법에 대해 알아보자. 🎶
해당 포스팅은 여기를 참고해서 작성됩니다.
궁금한 점, 보안점 남겨주시면 성실히 답변하겠습니다.👍
+ 감상평 댓글로 남겨주시면 힘이됩니다. 🙇
캔버스 튜토리얼
<canvas> 는 HTML의 요소 중 하나이다. 보통 Javascript랑 같이 사용하여 그림을 그리는 데에 사용된다. 그래프, 사진 합성, 간단한 에니메이션 만드는 데 해당 tag가 사용된다.
해당 튜토리얼에서는 <canvas> 요소를 사용하여 2D 그래픽을 어떻게 그리는지에 대해 기초부터 설명한다. 예제 코드를 수행함으로 캔버스가 어떤 일들을 할 수 있는지 알아보자.
시작 전 알아둬야 할 것
<canvas> 요소를 사용하는 것은 어려운 일이 아니다. 다만, HTML 과 Javascript 에 대한 기본 지식을 갖추고 있어야 해당 튜토리얼을 따라갈 수 있다. 만약 HTML에 대한 지식이 부족하다면 여기를 먼저 공부해보자.
<canvas>같은 경우 현재 대부분의 브라우저들이 지원하고 있다. 보통 크기는 300px * 150px (너비*높이) 가 초기 값으로 지정되어져 있다. HTML의 속성 값, Width or Height를 변경해 크기를 변경할 수 있다.
Canvas API
튜토리얼을 시작하기 앞서 Canvas API 를 한번 알아보자.
Canvas API는 앞서 말한것과 같이 HTML과 Javascript엘레먼트를 통해 그래픽을 그리기 위한 수단을 제공한다.
Canvas API는 주로 2D 그래픽에 중점을 두고 있다. WebGL API 또한 <canvas> 엘리먼트를 사용하며, 하드웨어 가속 2D 및 3D 그래픽을 그린다. (해당 부분은 추가로 다루도록 한다. 💪)
그렇다면, <canvas>를 어떻게 사용하는지 예시를 통해 알아보자.
<canvas id="canvas"></canvas>
위의 html 예시는 <canvas> 요소를 사용하는 방법을 나타낸다. <canvas> 요소는 property로 id, width, height를 갖고 있다. 만약 크기를 변경하고 싶다면, width, height를 변경하면 된다.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);
위의 js 예시는 우리가 이전에 작성한 <canvas> 요소를 활용하는 스크립트이다.
document.getElementById()를 활용해 id가 canvas라고 지정된 <canvas>요소에 대한 참조를 얻는다. getContext()를 활용해 <canvas> 요소의 컨텍스트를 얻어온다.
컨텍스트란? 쉽게말해 색연필이라고 생각하자. Canvas를 어떻게 그릴 것인지 판단해야한다. 우리는 2d라는 색연필과 3d라는 색연필을 선택할 수 있다. 해당 튜토리얼에서는 Canvas 관련 api를 다루기 때문에 2d 색연필 즉, 2d 컨텍스트를 얻어 사용한다.
실제 그리기는 우리가 얻어온 2d 컨택스트의 도구들을 활용해 그림을 그린다. 2d 컨텍스트의 원형은 CanvasRenderingContext2D이다. 해당 컨텍스트의 도구 중 fillStyle()를 사용해 Context를 초록색으로 채운다. 이후 fillRect()를 활용해 위치와 크기를 지정해준다.
우리가 작성한 코드가 어떤 결과를 보여줄까?
아래의 결과를 보자.
See the Pen graphic by 13634816 (@13634816) on CodePen.
우리는 지금까지 <canvas> 사용법에 대해 알아보았다. 다음 포스팅 부터 조금 더 자세하게 <canvas>에 대해 알아보자.
