라이브러리를 이용한 방사형 차트를 만들기 전, 육각형과 오각형을 그려보는 연습을 했다.
자바스크립트 코드로 육각형과 오각형을 그리려면
canvas api에 대해 알아야하고, 라디안과 삼각함수에 대한 개념이 필요하다.
해당 포스팅은 canvas api에 대한 기초설명, 라디안과 삼각함수 개념, 육각형과 오각형을 그리는 코드 전부를 정리하였다.
라디안
일반적으로 익숙하게 사용하는 각도법 ( =한 바퀴를 360도로 나누어 표현하는 것) 이 아니라
삼각함수는 항상 이 '라디안' (=호도법) 이라는 것을 이용해 계산을 합니다.
삼각함수
직각삼각형은 두 변이 이루고 있는 한 각이 직각(90도)인 삼각형이다.
삼각함수의 삼각비는 이 직각삼각형의 변의 비율로 찾을 수 있다.
직각을 마주 보고 있는 빗변의 길이에 대한 높이의 길이의 비가 ‘사인(sine)’이다.
빗변의 길이에 대한 밑변의 길이의 비는 ‘코사인(cosine)’이다.
밑변의 길이에 대한 높이의 길이 비를 ‘탄젠트(tangent)’라 한다.
직각삼각형의 크기에 상관없이, 세 각의 크기가 같으면 사인, 코사인, 탄젠트 값은 언제나 같다.
- sinθ = 높이(대변)/빗변
- cosθ = 밑변/빗변
- tanθ = 높이(대변)/밑변
canvas api
HTML <canvas> 요소는 HTML 페이지의 비트맵 영역 입니다 .
Canvas API를 사용하면 JavaScript에서 캔버스에 그래픽을 그릴 수 있습니다.
Canvas API는 색상, 회전, 투명도 및 기타 픽셀 조작을 사용하여 모양, 선, 곡선, 상자, 텍스트 및 이미지를 그릴 수 있습니다.
<canvas id="myCanvas" width="300" height="150"></canvas>1) HTML DOM 메서드를 <canvas>사용하여 요소 에 액세스합니다 .getElementById()
캔버스에 그리려면 2D 컨텍스트 개체를 만들어야 합니다 .
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");2) HTML <canvas>요소 자체에는 그리기 기능이 없습니다.
그래픽을 그리려면 JavaScript를 사용해야 합니다.
메서드 getContext()는 그리기 도구(메소드)가 있는 개체를 반환합니다.
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();3) 캔버스에 그리는 일반적인 방법은 다음과 같습니다.
- 경로 시작 - beginPath()
- 점으로 이동 - moveTo()
- 경로에 그리기 - lineTo()
- 경로 그리기 - stroke()
그리기 방법
캔버스에 직접 그리는 방법은 3가지뿐입니다.
- fillRect() - "채워진" 사각형을 그립니다.
- strokeRect() - 직사각형을 그립니다(채우지 않음).
- clearRect() - 사각형 내의 지정된 픽셀을 지웁니다.
경로 방법
- beginPath() - 새 경로를 시작하거나 현재 경로를 재설정합니다.
- closePath() - 현재 지점에서 시작 지점까지의 경로에 선을 추가합니다.
- isPointInPath() - 지정된 지점이 현재 경로에 있으면 true를 반환합니다.
- moveTo() - 캔버스의 한 지점으로 경로를 이동합니다(그리지 않음).
- lineTo() - 경로에 줄을 추가합니다.
- fill() - 현재 경로를 채웁니다.
- rect() - 경로에 직사각형을 추가합니다.
- stroke() - 현재 경로를 그립니다.
- bezierCurveTo() - 경로에 3차 베지어 곡선을 추가합니다.
- arc() - 경로에 호/곡선(원 또는 원의 일부)을 추가합니다.
- arcTo() - 경로에 대한 두 접선 사이에 호/곡선을 추가합니다.
- quadraticCurveTo() - 경로에 2차 베지어 곡선을 추가합니다.
출처 : https://www.w3schools.com/jsref/api_canvas.asp
1. 오각형그리기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 배경이 될 캔버스 -->
<!-- 캔버스 API를 사용하려면 먼저 캔버스 요소를 생성해야 합니다. 캔버스 요소는 다음과 같이 생성할 수 있습니다. -->
<canvas id="canvas" width="400" height="400" style="background-color: whitesmoke;" />
<script>
//캔버스 요소를 생성한 후에는 캔버스 컨텍스트를 가져와야 합니다. 캔버스 컨텍스트는 캔버스에 그래픽을 그리는 데 사용되는 객체입니다.
// 캔버스 요소 가져오기
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 오각형 그리기 함수
//x 와 y 는 중심축 , radius 반지름
function drawPentagon(x, y, radius) {
ctx.beginPath(); //경로를 시작
const angle = 2 * Math.PI / 5; // 360도를 5등분하여 오각형 각도 계산
// 오각형의 꼭지점 좌표 계산
for (let i = 0; i < 5; i++) {
const xPos = x + radius * Math.cos(angle * i); //밑변x = 반지름 x cos60
const yPos = y + radius * Math.sin(angle * i); //높이y = 반지름 x sin60
ctx.lineTo(xPos, yPos); //lineTo - 선을 추가
}
ctx.closePath(); //현재경로닫기 //현재 지점에서 다시 시작 지점까지의 경로를 만듬
ctx.stroke(); //테두리 - 현재 경로를 그림
//ctx.fill(); //채우기
}
// 오각형 그리기
//x,y,r 전달
drawPentagon(200, 200, 100);
</script>
</body>
</html>2. 육각형그리기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 배경이 될 캔버스 -->
<!-- 캔버스 API를 사용하려면 먼저 캔버스 요소를 생성해야 합니다. 캔버스 요소는 다음과 같이 생성할 수 있습니다. -->
<canvas id="canvas" width="400" height="400" style="background-color: whitesmoke;" />
<script>
//캔버스 요소를 생성한 후에는 캔버스 컨텍스트를 가져와야 합니다. 캔버스 컨텍스트는 캔버스에 그래픽을 그리는 데 사용되는 객체입니다.
// 캔버스 요소 가져오기
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 육각형 그리기 함수
//x 와 y 는 중심축 , radius 반지름
function drawHexagon(x, y, radius) {
ctx.beginPath(); //경로를 시작
const angle = 2 * Math.PI / 6; // 360도를 6등분하여 육각형 각도 계산
// 육각형의 꼭지점 좌표 계산
for (let i = 0; i < 6; i++) {
const xPos = x + radius * Math.cos(angle * i); //밑변x = 반지름 x cos60
const yPos = y + radius * Math.sin(angle * i); //높이y = 반지름 x sin60
ctx.lineTo(xPos, yPos); //lineTo - 선을 추가
}
ctx.closePath(); //현재경로닫기 //현재 지점에서 다시 시작 지점까지의 경로를 만듬
ctx.stroke(); //테두리 - 현재 경로를 그림
//ctx.fill(); //채우기
}
// 육각형 그리기
//x,y,r 전달
drawHexagon(200, 200, 100);
</script>
</body>
</html>
참고 출처 :
https://eperezcosano.github.io/hex-grid/
How to draw a hexagonal grid on HTML Canvas
How to get a perfect hexagon grid using JavaScript to draw on an HTML canvas.
eperezcosano.github.io
https://jw910911.tistory.com/6
라디안이란 무엇일까? 왜쓰는 걸까?
각도의 표현 각도를 표현하는 방법에는 각도법과 호도법이 있습니다. 각도법은 degree 호도법은 radian이라고 합니다. 각도법은 원주를 360등분한것의 하나를 1도로 정한 것이라고 할 수 있습니다.
jw910911.tistory.com
https://kukuta.tistory.com/199
삼각함수
필자는 수학을 못한다. 학생 시절 시험을 치면 다른 과목에서는 하나, 많이 틀리면 두개 정도 틀렸지만 수학만큼은 하나 아니면 두개 정도 맞을 정도로 수학에 대해서는 잼병이다. 본 포스트는
kukuta.tistory.com
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/PI
Math.PI - JavaScript | MDN
Math.PI 속성은 원의 둘레와 지름의 비율, 약 3.14159의 값을 가집니다.
developer.mozilla.org
'STUDY > JavaScript' 카테고리의 다른 글
| [JS] async와 await 란? (0) | 2023.08.11 |
|---|---|
| [JS] 콜백함수 쉽게 배워보기 (0) | 2023.08.09 |
| [JS] XMLHttpRequest return처리 (Callback) (0) | 2023.05.12 |
| [JS] wss와 ws 차이점 (0) | 2023.05.04 |
| [JS] 스크롤바 맨 아래로 내리기 (0) | 2023.04.27 |