canvas로 호(ar)를 그려보기

3D 뷰어를 스크립트로 만들고 있는중에 preLoader를 커스텀 해야하는 상황이 왔다.

예를 들면, bar 막대 형식의 기본 로더를 원 circle 형태로 커스텀 하는것이다. 커스텀을 위해 알아보던중, canvas를 사용해서 로더를 만들어 보기로 했다. 만들면서 쓰게 된 canvas에 대해 정리해본다.

(Reference를 참고하여 작성한 글입니다. 잘못된 사항이 있다면 댓글 부탁드립니다. )

참조 MDN https://developer.mozilla.org/ko/docs/Web/HTML/Canvas/Tutorial/Drawing_shapes

 

 

 

---

<canvas></canvas>

canvas는 HTML5의 엘리먼트중 하나로 Javascript를 함께 사용하여 브라우저에 그림판처럼 그림을 그릴 수 있는 api를 제공한다.

애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용된다. 2d 뿐만 아니라, WebGL과 함께 3d 그래픽 또한 그릴 수 있다.

 

 

호를 그리기 위한 html canvas를 추가해주고, 스크립트 단에서 canvas context를 가져온다.

<canvas id="vrismCanvas" width="200px" height="200px"></canvas>

let canvas = document.querySelector('#vrismCanvas'),
    ctx = canvas.getContext('2d'); //canvas에서 2d 그리기 context를 가져온다.

 

캔버스 위에서 직사각형을 제외한 그림을 그릴 때, path를 사용하는것은 필수적이다. path는 점들의 집합이며, 선의 한 부분으로 연결되어 여러가지 도형, 곡선을 이루고 두께와 색을 나타내게 된다.

호나 원을 그릴 때, arc(x, y, radius, startAngle, endAngle, anticlockwise) 메소드를 사용하는데,

(x, y) 위치에 원점을 두면서, 반지름 r을 가지고,  startAngle 에서 시작하여 endAngle 에서 끝나며 주어진 시계반대 방향으로 향하는 (기본값은 시계방향) 호를 그리게 된다. 여기서 startAngle과 endAngle은 원의 커브를 따라 호의 시작점과 끝점을 라디안 단위로 정의한다.

let bdr = 3, size = 200;	//선의 두께와, 사이즈
ctx.lineWidth = bdr;	// 선의 두께=3
ctx.strokeStyle= "#000";	//선의 스타일 색상
ctx.beginPath();			//새로운 path 시작
ctx.arc(size/2, size/2, size/2-3*2, 0, Math.PI *2 );	//호 그리기
ctx.stroke();		//path를 이용하여 도형 그리기

위의 예제의 경우, width와 height의 값이 200인 영역에 중심인 (100,100)에 중심점을 두고, 선의 두께 값을 뺀 94의 반지름값을 가진 호를 그리기로 했다. 

startAngle 시작각도 0 에서 Math.PI*2 까지 원의 둘레 만큼 그려준다.

 

여기서 잠깐 추가적인 부분-

arc를 사용하여 원이나 호를 그릴 때, 시작각도의 각도는 육십분법의 각도 각이 아닌 라디안 값을 사용한다.

라디안은 호도법을 사용해서 설명할 수 있다.

호도법
호의 길이를 이용해서 각도를 표시하는 방법
부채꼴 호의 길이는 중심각과 비례하므로 부채꼴 호의 중심각은 반지름에 상관없이 항상 일정한 값을 가지는데 이값을 1 라디안이라고 한다.

Math.PI 라디안 = 180º
1라디안 = 180º/Math.PI
1º = Math.PI/180 라디안

참조 수학방 https://mathbang.net/496

 

360º도의 호를 그리기 위해서는 호도법으로 2π이기 때문에 Math.PI *2 해줬다.

 

그래서 그린 preloader 완성.

로고가 치우쳤는데, 저부분은 canvas 호 안에 이미지를 넣어서 가운데 정렬을 해 볼 것이다.

canvas를 이용한 호 그리기