반응형
자바스크립트로 6각형 그리기
다음 HTML과 JavaScript 파일은 웹 페이지에서 원에 내접하는 6각형을 그리는 예를 보여줍니다.
HTML 파일 (hexagon.html
) 구조
- HTML5 문서 선언 (
<!DOCTYPE html>
) - HTML 문서의 루트 (
<html>
)와 헤드(<head>
)가 포함되어 있으며, - 문서의 제목(
<title>
)이 "원에 내접하는 6각형 그리기"로 설정되어 있습니다. - 본문(
<body>
)에는id
가 "myCanvas"인<canvas>
요소가 포함되어 있고, 이는 너비와 높이가 "400"픽셀로 설정된 드로잉 캔버스를 나타냅니다. - JavaScript 파일 (
hexagon.js
)을 참조하는 스크립트(<script>
) 태그가 있습니다.
JavaScript 파일 (hexagon.js
) 구조
- 문서가 완전히 로드된 후에 실행될 콜백 함수를 설정하기 위해
DOMContentLoaded
이벤트 리스너를 추가합니다. - 캔버스 요소를 찾고 2D 렌더링 컨텍스트를 가져옵니다 (
getContext('2d')
). - 캔버스의 중앙 좌표를 계산합니다 (
centerX
,centerY
). - 원과 내접하는 6각형의 크기를 정의합니다 (
size
). ctx.arc
와ctx.stroke
를 사용하여 원을 그립니다.- 6각형을 그리기 위해 6방향 각각에 대해
for
루프를 사용하여 각 꼭짓점의 좌표를 계산하고 (Math.cos
,Math.sin
을 사용하여 극좌표 계산),ctx.moveTo
와ctx.lineTo
로 6각형을 그립니다. ctx.closePath
와ctx.stroke
로 6각형을 완성합니다.
결과
실제로 이 코드를 사용하여 그려진 원과 내접하는 6각형을 보여줍니다. 원이 그려지고, 그 내부에 6각형의 각 꼭짓점이 원의 경계에 맞닿아 있습니다. 이는 아르키메데스가 사용했던 기하학적 접근법을 시각화하는 좋은 예입니다.
'자바스크립트' 카테고리의 다른 글
[자바스크립트] 자바스크립트로 직각삼각형 그리기 (0) | 2024.04.06 |
---|---|
자바스크립트 시작하기 (0) | 2023.01.09 |