A review of the canvas pentagram "Junior Trigonometric Functions"

When the program encountered triangular function when I was confused, so Baidu "junior trigonometric Functions",

Forget about these formulas, and punch yourself in the face.

The goal is to draw a pentagram through canvas,

Breakthrough: As long as the radius of the given two outer punctuate, and the radius of the inner punctuate, with the above formula to calculate the coordinates of each pentagram point.

The main code is as follows:

"300" means the radius of the outer ring.

"150" refers to the radius of the inner ring.

<canvas id= "Canvas" width= "height=" ></canvas>

 var  cvs = document.getElementById ("Canvas" );         var  ctx = Cvs.getcontext ("2d" );        Ctx.linewidth  = 2;                Ctx.beginpath ();  for  (var  i = 0; i < 5; I++) {Ctx.lineto (( + i *)/Math.Cos * Math.PI) * + +,-math.sin ((+ + I *)/+/-Mat            H.PI) * R1 + 400); Ctx.lineto (Math.Cos (( si + i *)/Math.PI) * 400 +,-math.sin ((* * * + i * * * * * * * * * * * * * * * math.pi) * R2        );                } ctx.closepath ();                Ctx.strokestyle  = "Red"  Ctx.stroke (); 

Encapsulation into method

        function draw_star5 (CTX, R1, R2, x, y, rot) {  //  R1 Large circle radius, R2 Small Circle radius, center coordinate x, center coordinate y,rot rotation angle (not available) clockwise /c6>            Ctx.beginpath ();              for  (var i = 0; i < 5; i++) {                Ctx.lineto (math.cos(+ i * 72-rot)/Math.PI + x) -math.sin ((+ i * 72-rot)/math.pi) * r1 + y);                Ctx.lineto (Math.Cos(si + i * 72-rot)/math.pi) * r2 + x,-math.sin ((si + i * 72-rot)/math.pi) * R2 + y);            }                    Ctx.closepath ();        }

A review of the canvas pentagram "Junior Trigonometric Functions"