HTML 캔버스로 모양을 만드는 방법

목차

1. 소개
2. 시작하기
3. 도형 그리기
4. 결론

---

✍️ 소개

HTML <캔버스> 요소는 그래픽이 포함된 콘텐츠를 만드는 데 사용됩니다. 이를 통해 개발자는 스타일과 애니메이션을 포함한 도형, 텍스트, 도형을 그릴 수 있습니다.

---

✨ 캔버스 시작하기

HTML <캔버스>로 도형을 만들 때 설정해야 할 몇 가지 팁이 있습니다

• 1. <캔버스> 추가 사용을 지정하기 위해 HTML 페이지에 요소를 추가하고, 캔버스 태그에는 Javascript에 의해 동적으로 제어되는 ID(id) 속성이 포함되어 있습니다. 캔버스 요소의 크기를 결정하려면 너비와 높이도 설정해야 합니다

• 2. <캔버스> 조작 ID를 사용하여 요소를 검색하여 JavaScript로 요소를 검색하고 상수 캔버스에 할당합니다. getContext("2d") 메소드는 캔버스를 텍스트, 모양 또는 이미지로 렌더링합니다.

---

✏️ 도형 그리기

---

? 직사각형

이러한 방법을 사용하면 x = 직사각형의 x 좌표, y = 직사각형의 y 좌표, 너비 = 직사각형의 너비 및 직사각형의 높이인 직사각형을 만들 수 있습니다.

• fillRect(x, y, 너비, 높이) 이 방법은 채우기 스타일로 채워진 직사각형을 만들어 특정 색상을 지정합니다.

• 스트로크Rect(x, y, 너비, 높이) 이 방법은 윤곽선 직사각형이나 획이 있는 직사각형을 만들고, 스트로크 스타일을 사용하여 여기에 색상을 추가할 수 있습니다.

• ClearRect(x, y, 너비, 높이) 이 방법은 투명한 직사각형을 생성하지만 투명 직사각형이 렌더링될 수 있도록 색상 이름으로 채워진 캔버스 너비와 높이를 지정해야 합니다

---

? 사각형

정사각형을 만드는 방법은 직사각형과 동일하며 차이점은 직사각형과 달리 너비 값이 높이와 동일하다는 점입니다.

---

? 삼각형

이러한 방법을 사용하여 삼각형을 만들 수 있습니다.

-beginPath(): 이 메서드는 그림의 새 경로를 시작하는 것입니다.
-moveTo(x, y): 이 방법은 삼각형의 첫 번째 꼭지점에서 펜을 이동하는 데 도움이 됩니다
-lineTo(x, y): 이 방법은 삼각형의 아래쪽 꼭지점을 그립니다.

---

⚪️ 서클

서클을 만들 때 다음 방법을 사용합니다.

• BeginPath(): 경로를 시작하는 메서드입니다.
• arc(x, y, radius, startAngle, endAngle, anticlockwise): x와 y는 중심의 중심 좌표이고, radius는 원의 반경이고, startAngle과 endAngle은 원의 각도입니다. 서클.
• Math.PI- 반원을 만드는 데 사용되며 여기에 2를 곱하면 완전한 원이 됩니다

---

? 타원

이 모양은 동일한 유형의 방법을 사용하지만 다음을 사용합니다.

-타원(x, y, radiusX, radiusY, 회전, startAngle, endAngle, 반시계 방향): 여기서
-x와 y는 타원의 중심 좌표입니다.
-radiusX 및 radiusY는
의 수평 및 수직 반경입니다. 타원,
-rotation은 타원의 회전을 라디안 단위로 표시합니다.
-startAngle 및 endAngle은
의 시작 및 끝 각도를 나타냅니다. 그림(라디안 및
) -시계 반대 방향은 true 또는 false 값을 갖는 선택 사항입니다.
(기본값은 false입니다).

---

? 평행사변형

이 모양은 다음 방법을 사용합니다.

• 모양에 4개의 모서리가 있는 4개의 측면이 있으므로 BeginPath를 사용하여 새 그리기 경로를 시작하고 moveTo(x, y)를 사용하여 첫 번째 모서리를 설정합니다.
• lineTo는 4개의 변이 있으므로 서로 연결하는 선을 그립니다.

---

? 사다리꼴

이 모양은 평행사변형과 매우 유사하며 그리는 데 동일한 방법을 사용합니다. 유일한 차이점은 좌표 값입니다.

---

? 콘

삼각형을 그리는 방식과 반원을 그리는 방식을 결합한 도형입니다.

---

? 다각형

다각형을 만들려면 변의 개수가 다르기 때문에 변의 개수를 정해야 합니다.

다각형을 만드는 데 다음 방법이 사용됩니다.

• BeginPath(): 새로운 도형을 생성하는 메소드입니다.
• closePath(): 도형을 종료하는 메소드입니다.
• cx: x 좌표의 중심 값입니다.
• cy: 해당 값은 y 좌표의 중심을 지정합니다.
• radius: 모양의 반경.

각도를 구하려면 원을 둘로 나누어 이 공식으로 계산해야 합니다.

angle = 2π/ n

• 펜타곤

• 육각형
  

• 칠각형

• 팔각형

• 노나곤

• 십각형

결론

드디어 이 글이 끝났습니다. 우리가 만든 도형에는 그리는 방법이 여러 가지가 있습니다.

읽어주셔서 감사합니다.
에서 저와 소통하세요 링크드인

엑스

위 내용은 HTML 캔버스로 모양을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!