사각형이라면 원하는 (x,y) 좌표를 쉽게 구할 수 있다.
하지만 원은 (x,y) 좌표를 구하기가 쉽지 않았다.
원의 각 점의 좌표를 구하기 위해서는 다음과 같은 공식을 활용할 수 있다.
우리는 0, 30, 60, 90도등의 좌표는 sin 함수와 cos 함수를 통해 구할 수 있다.
x = Math.cos(0) * radius; // radius = 반지름
y = Math.sin(0) * radius;
x = Math.cos(30) * radius;
y = Math.sin(30) * radius;
대부분 프로그래밍에서는 각도의 크기를 대부분 라디안이라는 단위로 사용한다.
Math.cos(), Math.sin() 을 사용에 있어서, 각도의 크기를 라디안으로 변환하는 과정이 필요하다.
function toRadians(degrees) {
return degrees * (Math.PI / 180);
}
첫번째 사진을 그리기 위한 자바스크립트 전체 코드 이다.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>canvas { border:2px solid magenta; }</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = 150; //반지름
var center = { x: 200, y: 200 };
var obj = {};
// 0도 ~ 360도 까지 10도씩 증가
for (var i = 0; i <= 360; i += 10) {
obj.x = Math.floor(radius * Math.cos( toRadians(i) ));
obj.y = Math.floor(radius * Math.sin( toRadians(i) ));
ctx.strokeRect( center.x+obj.x , center.y+obj.y, 2,2);
}
}
function toRadians(degrees) {
return degrees * (Math.PI / 180);
}
</script>
</body>
</html>
참고 : https://mygumi.tistory.com/346 [마이구미의 HelloWorld]
'프론트엔드 개발 놀이터 > etc' 카테고리의 다른 글
| 홈페이지 제작 후 할 일 – 검색엔진, 포털 등록 (0) | 2020.02.24 |
|---|---|
| 구면 좌표계 (공 그리기) - js (0) | 2020.02.13 |
| 삼각함수 공식 정리 (0) | 2020.02.12 |
| 위도 경도 찾기 (0) | 2020.02.11 |
| 지구과학 - 적경, 적위, 방위각, 고도 (0) | 2020.02.11 |