Canvas로 여러 변형을 그리는 것은 매우 간단합니다. Canvas 경로를 이해하고 간단한 중학교 수학 지식만 있으면 완성됩니다.
코드펜이 열립니다
분석하다아이디어는 위와 같습니다. 매우 간단합니다. 각 점의 위치를 계산하고 lineTo()를 통해 경로를 그립니다.
핵심 코드는 다음과 같이 구문 분석됩니다(또는 CodePen에서 확인).
function drawPolygonPath(sideNum, radius, OriginX, OriginY, ctx){ ctx.beginPath(); const unitAngle = Math.PI * 2 / sideNum; //단위 각도 계산 let angle = 0; // ctx.moveTo(originX, OriginY); for(let i = 0; i < sideNum; i++){ //계산 지점을 이동하고 lineTo()로 경로를 그립니다. xLength = radius * Math.cos(angle); yLength = radius * Math.sin(angle); /Draw Path angle += unitAngle; } ctx.closePath();//닫힌 경로, for 루프에서 lineTo()를 시작점까지 한 번 더 반복할 수도 있습니다.위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.