HTML5 drawing a rotated Taiji figure

Use Html5+javascript to draw the rotated Taiji figure in the canvas, as shown in:

Specific ideas and drawing logic, which have been described in, the code is as follows:

1<script type= "Text/javascript" >2 3        //Draw only border lines, no padding4         functionbigcircle (ctx,x, Y, R, St, end, W,oc) {5Ctx.linewidth =W;6 Ctx.beginpath ();7 Ctx.arc (x, Y, R, St, end, OC);8 Ctx.closepath ();9 Ctx.stroke ();Ten         } One         //There is a fill, a small circle, X, Y represents the center of the Great Circle, R is the radius of the great circle, W is the line width, OC is the direction, L represents the upper and lower, d indicates the degree A         functionsmallcircle (CTX, x, Y, R, St, End, W, OC, l,d) { -             varAngle = d * math.pi/180;//The offset angle is expressed in radians -Ctx.linewidth =W; the Ctx.beginpath (); -             if(l) { -Ctx.fillstyle = "BLACK";  -Ctx.arc (x + (R/2) * Math.sin (Angle), Y-(R/2) * Math.Cos (Angle), R/10, St, end, OC); +}Else { -Ctx.fillstyle = "Red"; +Ctx.arc (X-(R/2) * Math.sin (Angle), Y + (R/2) * Math.Cos (Angle), R/10, St, end, OC); A             } at Ctx.closepath (); - Ctx.stroke (); - Ctx.fill (); -         } -  -         //This function is a circle with an S-shaped curve, l represents left, right , clockwise in         //d indicates the degree -         functionhalfcircle (CTX, x, Y, R, W, L,d) { toCtx.linewidth =W; +             if(l) { -Ctx.fillstyle = "BLACK"; the}Else { *Ctx.fillstyle = "Red"; $             }Panax Notoginseng Ctx.beginpath (); -             varAngle = d * math.pi/180;//The offset angle is expressed in radians the  +Ctx.arc (x + (R/2) * Math.sin (Angle), Y-(R/2) * Math.Cos (Angle), R/2, MATH.PI/2 + Angle, Math.PI * 3/2 + Angle,true); ACtx.arc (X-(R/2) * Math.sin (Angle), Y + (R/2) * Math.Cos (Angle), R/2, MATH.PI*3/2 + Angle, MATH.PI/2 + Angle,true); theCtx.arc (x, Y, R, Math.pi/2 + Angle, Math.PI * 3/2 + Angle, L);//clockwise, counterclockwise by parameter + Ctx.closepath (); - Ctx.stroke (); $ Ctx.fill (); $         } -  -         varnum = 0;//indicates the degree of rotation the         functionDrawtaichi () { -             varc = document.getElementById ("MyCanvas");Wuyi             varCTX = C.getcontext ("2d"); the             varCX = 200; -             varCY = 200; Wu             varRADIUS = 150; -Ctx.clearrect (0,0, c.width,c.height); About             //Draw S Line left $Halfcircle (CTX, CX, CY, radius, 1,true, num); -             //Right -Halfcircle (CTX, CX, CY, radius, 1,false, num); -             //draw a small circle, on ASmallcircle (CTX, CX, CY, radius, 0, Math.PI * 2, 1,true,true, num); +             //draw a small circle, under theSmallcircle (CTX, CX, CY, radius, 0, Math.PI * 2, 1,true,false, num); -             //Draw an outer circle $Bigcircle (CTX, CX, CY, radius, 0, Math.PI * 2, 2,true); the Ctx.save (); thenum++; thenum = num% 360;//only 360 °, so more than 360, start again the         } -  inWindow.onload =function () { theSetInterval (Drawtaichi, 200); the         } About  the</script>

View Code

HTML5 drawing a rotated Taiji figure