반응형
자바스크립트로 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 |
|---|---|
| 자바스크립트 시작하기 (1) | 2023.01.09 |