🔧변경내용🔨

제목	날짜	내용
발행일	23.03.17

📌들어가기에 앞서

해당 포스트는 CANVAS에 대해 학습한 내용을 정리하며 기록한 내용입니다.

---

📖 Canvas

HTML의 <canvas> 태그와 Javascript를 사용하면 다양한 그래픽 요소를 만들 수 있다.

단순한 도형을 그리는 것은 물론, 데이터 시각화, 애니메이션, 웹 게임 등 사용하기에 따라 무궁무진한 콘텐츠를 만들어낼 수 있다.

기본적인 캔버스 사용법부터 알아보자.

일단은 캔버스 태그를 작성하는 것으로 시작

캔버스는 canvas 엘리먼트를 DOM으로 조작하는 방식으로 작성

따라서 엘리먼트를 선택할 때 사용할 id를 작성해주는 것이 좋다.

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

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

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

캔버스를 본격적으로 다루기 전에, 너비와 높이를 설정해야한다.

크기를 설정해주지 않으면 기본적으로 300픽셀 * 150픽셀의 사이즈로 생성

설정 방법에는 두 가지가 있다.

첫 번째 방법은 <canvas>의 태그 속성으로 너비와 높이를 설정해주는 것

• 각각 width, height 속성으로 설정해줄 수 있다.

<canvas id="canvas" width="500" height="500"></canvas>

• 이렇게 숫자만 넣으면 알아서 픽셀 단위로 인식하여 500px * 500px 로 설정

• 그러나 개발을 하다보면 vw, vh 등 다른 단위로 설정을 하고 싶을 때가 있다.

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

• 이번에는 vw, vh 단위를 이용하여 너비를 설정을 했다.

• 예상대로 vw, vh로 단위를 설정했기 때문에 너비 단위 설정이 되었을 것이라 생각이 들겠지만, 50픽셀 * 40픽셀로 설정

• 왜냐하면 캔버스 요소의 width, height 속성은 픽셀 단위로만 명시해야 인식

• 어떤 단위로 속성 값을 설정해주든 픽셀로만 인식

두 번째 방법은 DOM으로 설정하는 것

• 이 경우는 유동적인 값도 설정해줄 수 있기 때문에 캔버스의 크기가 고정되어있지 않은 경우에 사용하기 좋다.

• 이 경우에는 원하는 단위로 값을 지정해서 명시할 수 있기 때문에 태그 속성으로 설정해주는 것과 차이가 있다.

// 화면 크기에 맞춰서 설정
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 화면 크기를 가져와 그에 비례하여 설정
canvas.width = window.innerWidth * 0.5;
canvas.height = window.innerHeight * 0.4;

// DOM으로 설정할 시, 픽셀 단위가 아닌 
// vw, vh로 단위값을 지정해도 설정이 된다.

// 주의해야 할 점은 style 속성을 이용하여 크기에 변화를 주는 경우는 
// 픽셀의 크기까지 해당 단위에 비례해 확대하는 개념이므로,
// 특정한 경우가 아니면 사용을 자제하자.
    canvas.style.width = "50vw";
    canvas.style.height = "40vh";

---

CANVAS 실습

지금부터는 간단한 예제를 통해 캔버스의 사용법을 익혀보자.

📖 캔버스로 사각형 그리기

색칠된 사각형 그리기

1. fillStyle 속성으로 사각형 내부를 색칠할 색상을 설정

ctx.fillStyle ='blue'

2. fillRect 메소드를 사용해 사각형을 그린다.

ctx.fillRect = (10,10,100,50)
//전달 인자는 순서대로 x좌표, y좌표, 가로길이, 세로 길이

선으로만 그리기

1. lineWidth 속성으로 선의 굵기
   strokeStyle 속성으로 선의 색상 설정

ctx.lineWidth = 5;
ctx.strokeStyle = "black";

2. strokeRect 메소드를 사용해 사각형을 그려줌

ctx.strokeRect(10, 10, 100, 50)
//전달 인자는 이번에도 순서대로 x좌표, y좌표, 가로길이, 세로길이
//위에서 그려준 색칠된 사각형 바로 위에 그려보자

사각형으로 지우기

• clearRect 메소드로 지울 범위를 설정

ctx.clearRect( 20, 20, 80, 30)
// 전달 인자는 역시 동일
// 그려놓은 사각형 가운데 부분을 지워보자.

---

📖 캔버스로 클릭이벤트 만들기

이번에는 캔버스로 사각형을 그리는 방법을 이용해서, 캔버스를 클릭하면 클릭하는 위치에 사각형을 그리는 이벤트를 만들어보자.

클릭이벤트가 일어날 때의 마우스의 위치를 어떻게 구할까?

클릭할 때 캔버스 위에서의 마우스 위치를 구하려면,

화면에서의 마우스 위치에서 화면에서의 캔버스 위치를 빼면 된다.

화면상 마우스 위치를 구하는 이벤트 객체의 속성

• X좌표 : event.clientX

• Y좌표 : event.clientY

화면상 캔버스의 위치를 구하는 속성

• X좌표 : ctx.canvas.offsetLeft

• Y좌표 : ctx.canvas.offsetTop

혹은 event.offsetX , event.offsetY 로 바로 구할 수도 있다.

canvas.onclick = function (event) {
	const x = event.clientX - ctx.canvas.offsetLeft
	const y = event.clientY - ctx.canvas.offsetTop
// 구한 좌표를 이용해서 사각형을 그리는 코드를 작성

	ctx.fillRect(x - 15, y - 15, 30, 30);
// 클릭할 때마다 30픽셀*30픽셀 크기의 사각형을 그리도록 하려고 한다.
// 이 때, x, y를 그대로 전달하면 해당 좌표부터 사각형이 시작되어 어색한 느낌을 준다.
// 클릭한 위치를 사각형의 정중앙이 되게 하려면 사각형크기/2 한 만큼 좌표에서 빼주면 된다.
// 따라서 x - 15, y - 15 를 전달
}

결과물은 다음과 같습니다.

---

📖 Reminder

캔버스는 애니메이션, 데이터 시각화, 웹 게임 개발 등 그래픽이 필요한 곳이라면 어디든지 다양하게 활용할 수 있다. 스스로 검색하고 학습하며 추가적인 학습을 해보자.

---

📚 레퍼런스

코드스테이츠 수업자료

CANVAS | W3SCHOOL