Html5 plot the rotate plot, html5 plot the rotate Diagram

Html5 plot the rotate plot, html5 plot the rotate Diagram

Use Html5 + JavaScript to draw a rotation plot in the Canvas, as shown in:

The Code is as follows:

1 <script type = "text/javascript"> 2 3 // draw only border lines without filling 4 function bigCircle (ctx, x, y, r, st, end, w, oc) {5 ctx. lineWidth = w; 6 ctx. beginPath (); 7 ctx. arc (x, y, r, st, end, oc); 8 ctx. closePath (); 9 ctx. stroke (); 10} 11 // filled, draw a small circle, x, y indicates the center of the big circle, r indicates the radius of the big circle, w indicates the width of the line, oc indicates the direction, l indicates upper and lower, and d indicates level 12 function smallCircle (ctx, x, y, r, st, end, w, oc, l, d) {13 var Angle = d * Math. PI/180; // uses radians to represent 14 ctx. lineWidth = w; 15 ctx. beginPath (); 16 if (l) {17 ctx. fillStyle = "black"; 18 ctx. arc (x + (r/2) * Math. sin (Angle), y-(r/2) * Math. cos (Angle), r/10, st, end, oc); 19} else {20 ctx. fillStyle = "red"; 21 ctx. arc (x-(r/2) * Math. sin (Angle), y + (r/2) * Math. cos (Angle), r/10, st, end, oc); 22} 23 ctx. closePath (); 24 ctx. stroke (); 25 ctx. fill (); 26} 27 28 // This function is a circle with an S-shaped curve. l indicates left and right, true indicates left, clockwise, and false indicates right, counter-clockwise 29 // d indicates the degree 30 function halfCircle (ctx, x, y, r, w, l, d) {31 ctx. lineWidth = w; 32 if (l) {33 ctx. fillStyle = "black"; 34} else {35 ctx. fillStyle = "red"; 36} 37 ctx. beginPath (); 38 var Angle = d * Math. PI/180; // uses radians to indicate 39 40 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); 41 ctx. 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); 42 ctx. arc (x, y, r, Math. PI/2 + Angle, Math. PI * 3/2 + Angle, l); // clockwise, 43 ctx is determined by the parameter counterclockwise. closePath (); 44 ctx. stroke (); 45 ctx. fill (); 46} 47 48 var num = 0; // indicates the Rotation Degree 49 function drawTaichi () {50 var c = document. getElementById ("myCanvas"); 51 var ctx = c. getContext ("2d"); 52 var cX = 200; 53 var cY = 200; 54 var radius = 150; 55 ctx. clearRect (0, 0, c. width, c. height); 56 // draw S-line left 57 halfCircle (ctx, cX, cY, radius, 1, true, num); 58 // right 59 halfCircle (ctx, cX, cY, radius, 1, false, num); 60 // draw a small circle, top 61 smallCircle (ctx, cX, cY, radius, 0, Math. PI * 2, 1, true, true, num); 62 // draw a small circle with 63 smallCircle (ctx, cX, cY, radius, 0, Math. PI * 2, 1, true, false, num); 64 // draw the 65 bigCircle (ctx, cX, cY, radius, 0, Math. PI * 2, 2, true); 66 ctx. save (); 67 num ++; 68 num = start 69} 70 71 window again. onload = function () {72 setInterval (drawTaichi, 200); 73} 74 75 </script>

View Code