캔버스 다섯개 별을 달성하기 위해

변수 방식은 다섯개 별, 먼저 정점의 좌표를 추구 다섯개 별 열을 그립니다.

각각 그려진 외부 정점, 정점에 그려진 작은 원으로 큰 원 다섯개 별이 될 수 있습니다. 좌표계 (0deg)의 각 정점에 따른 각도 및 원호 반경 결정 X, Y.

 

 

그리고 72deg (5분의 180)의 큰 차이의 각 정점은, 각각의 작은 정점 열등 72deg. 다음 정점 그래서 정도가 현재 포인트 플러스 72deg입니다. (시계 반대 방향)

 

 

 

 

 

 

 코드 구현

 
 
 drawStar (문맥, 300, 150, 400, 400);
함수 drawStar (문맥, R, R, X, Y) { 
            context.beginPath (); 
            위한 VAR (I = 0; i가 < 5 ; 내가 ++) {
                 context.lineTo (X +와 Math.cos ((18 + 72 * I) / 180 * 인 Math.PI) * R, 
                               Y - Math.sin 이런 ((18 + 72 * I) / 180 * 인 Math.PI) * R); 
                context.lineTo (* I) / 180 * 인 Math.PI) * R, X +와 Math.cos ((54 + 72 
                               Y - Math.sin 이런 ((54 + 72 * I) / 180 * 인 Math.PI) * R) ; 
            } 
            context.closePath (); 
            context.stroke (); 
        }

 

추천

출처www.cnblogs.com/jiaobaba/p/11579621.html