HTML5는 Effects_html5 튜토리얼 기술의 스크린샷을 사용하여 캔버스에 복잡한 모양을 그립니다.

1. 복잡한 모양이나 경로 그리기

간단한 직사각형이 요구 사항을 충족할 수 없는 경우 그리기 환경에서는 복잡한 모양이나 경로를 그릴 수 있는 다음과 같은 방법을 제공합니다.

beginPath(): 새 경로 그리기를 시작합니다.
closePath(): 현재 지점에서 경로의 시작 지점까지 선분을 그려 모양을 닫습니다.
fill(), 스트로크(): 도형을 채우거나 속이 빈 도형을 그립니다.
moveTo(): ​​​​현재 지점을 (x, y) 지점으로 이동합니다.
lineTo(): ​​​​현재 지점에서 (x, y) 지점까지 직선을 그립니다.
arc(x,y,r,sAngle,eAngle,counterclockwise): (x,y) 지점까지 지정된 반경을 갖는 호를 그립니다.

2. 이러한 메서드를 사용하여 복잡한 모양을 그리려면 다음 단계를 따라야 합니다.

beginPath() 메서드를 사용하여 경로 그리기를 시작합니다.
선분을 생성하려면 moveTo(), lineTo(), arc() 메소드를 사용하세요.
closePath()를 사용하여 그리기를 종료하고 도형을 닫습니다(선택 사항).
Stroke() 또는 fill()을 사용하여 경로의 외부 테두리나 채우기 모양을 그립니다. fill()을 사용하면 닫히지 않은 모든 경로가 자동으로 닫힙니다.

3. Arc() 그리기 지침


4. 캔버스에 복잡한 도형 그리기

코드 복사

코드는 다음과 같습니다.