[JavaScript] 자바스크립트에서 삼각 함수 사용하기

024_삼각 함수 사용하기

[적용]

• 삼각 함수 계산을 사용하고 싶을 때
• 좌표에서 각도를 구하고 싶을 때
• 호를 그리는 애니메이션 효과를 주고 싶을 때

---

[내용]

사인, 코사인, 탄젠트 등 삼각 함수 계산을 위한 메소드.

캔버스와 SVG에서 애니메이션 효과를 줄 때 자주 사용된다.

다음을 통해 사용법을 확인해 보자.

---

[문법]

메소드(속성)	의미	반환(타입)
Math.PI	원주율	숫자
Math.cos(값)	코사인 (cos)	숫자
Math.sin(값)	사인 (sin)	숫자
Math.tan(값)	탄젠트 (tan)	숫자
Math.acos(값)	코사인 역함수 (acos)	숫자
Math.asin(값)	사인 역함수 (asin)	숫자
Math.atan(값)	탄젠트 역함수 (atan)	숫자
Math.atan2(y좌표, x좌표)	(x, y) 좌표가 이루는 각도	숫자

* 반환값 숫자의 단위는 라디안(Radian)이다.

---

[예시1]

JavaScript

Math.PI;  // 원주율 3.141592653589793
Math.cos((90 * Math.PI) / 180);  // cos 90º 6.123233995736766e-17(주1)
Math.sin((90 * Math.PI) / 180);  // sin 90º 1
Math.tan((45 * Math.PI) / 180):  // tan 45º 0.999999999999999(주1)
Math.acos(1);  // 역함수 사인 1 = 0
(Math.atan2(1,1) * 180) / Math.PI;  // (1, 1)의 좌표가 이루는 각도 45도

(주1)

자바스크립트 10진수의 유효 자릿수는 15자리(IEEE 754규격)이므로,

실제 cos90도와 tan45도의 값(0과 1)과 비교했을 때 오차가 발생한다.

---

[예시2]

Math.cos()와 Math.acos()에 전달하는 값의 단위는 라디안(Radian)이다.

원주의 길이는 \pi  로 표시하기 때문에 도수를 라디안으로 변환하는 편이 사용하기 쉽다.

이 도수의 변환식은 다음과 같다.

라디안 = (도수 * Math.PI) / 180;

삼각 함수를 사용해 원을 그리는 애0니메이션을 만들어 보자.

반지름이 100인 원주에 degree 위치 좌표는 다음과 같이 나타낼 수 있다.

 

JavaScript

// 각도
Let degree = 0;

// 회전각을 라디안으로 구하기
const rotation = (degree * Math.PI) / 100;

// 회전각으로 위치 구하기
const targetX = 100 * Math.cos(rotation);
const targetY = 100 * Math.sin(rotation);

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김