Canvas

❤️‍🔥 Canvas

HTML의 <canvas> 태그와 Javascript를 사용하면 다양한 그래픽 요소를 만들 수 있습니다. 단순한 도형을 그리는 것은 물론, 데이터 시각화, 애니메이션, 웹 게임 등 사용하기에 따라 무궁무진한 콘텐츠를 만들어낼 수 있습니다.

기본적인 캔버스 사용법부터 알아봅시다. 일단은 캔버스 태그를 작성하는 것으로 시작됩니다. 캔버스는 canvas 엘리먼트를 DOM으로 조작하는 방식으로 작성됩니다. 따라서 엘리먼트를 선택할 때 사용할 id를 작성해주는 것이 좋습니다.

<canvas id="canvas">
	캔버스를 지원하지 않는 브라우저에서는 캔버스 대신 태그 사이 내용이 표시됩니다.
</canvas>

이제 자바스크립트를 사용해서 엘리먼트를 선택해줍시다.

const canvas = document.querySelector("#canvas");

캔버스를 본격적으로 다루기 전에, 너비와 높이를 설정해주어야 합니다. 크기를 설정해주지 않으면 기본적으로 300픽셀 * 150픽셀의 사이즈로 생성됩니다. 설정 방법에는 두 가지가 있습니다.

• 태그 속성으로 설정해줍니다. 각각 width, height 속성으로 설정해줄 수 있습니다. 다만, 이 방법은 어떤 단위로 속성값을 설정해주든 픽셀로만 인식합니다. 캔버스 요소의 width, height 속성은 픽셀 단위로만 명시해야 인식하도록 되어 있기 때문입니다.

<canvas id="canvas" width="500" height="500"></canvas>
		// 500픽셀 * 500픽셀로 설정됩니다.

<canvas id="canvas" width="50vw" height="40vh"></canvas>
		// vw, vh를 전달했지만 50픽셀 * 40픽셀로 설정됩니다.

• DOM으로 설정해주는 방법도 있습니다. 이 경우는 유동적인 값도 설정해줄 수 있기 때문에 캔버스의 크기가 고정되어있지 않은 경우에 사용하기 좋습니다. 이 경우에는 원하는 단위로 값을 지정해서 명시할 수 있기 때문에 태그 속성으로 설정해주는 것과 차이가 있습니다.

   canvas.width = 50vw;
   canvas.height = 40vh;
   	// DOM으로 설정하면 50vw * 40vh 로 단위값을 지정해도 설정이 됩니다.
   
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight;
   	// 화면 크기에 맞춰서 설정해줄 수도 있습니다.