Html5 canvas draws a circular seal and interacts with the page. html5canvas

Html5 canvas draws a circular seal and interacts with the page. html5canvas

1 <! DOCTYPE html> 2 // Rotate 69 if (I = 0) {70 context around the center of the canvas. rotate (5 * Math. PI/6); 71} else {72 context. rotate (angle); 73} 74 context. save (); 75 context. translate (66, 0); // translate to this position. The word is perpendicular to the X axis, and the company name is 76 context away from the outermost circle. rotate (Math. PI/2); // Rotate 90 degrees to make the word parallel to 77 context on the X axis. scale (1, 2); // scale the canvas to extend the text by 78 context. fillText (c, 0, 0); // This point is the center of the word 79 context. restore (); 80} 81 // set the canvas to the original position as the origin, and rotate back to the original position of the balance to clear the 82 context of the canvas. rotate (-Math. PI/6); 83 context. translate (0-canvas.width/2,0-canvas. height/2); 84 85 86 87 // draw a star 88/** 89 * to create a star shape. the center coordinate of the star is (sx, sy), and the distance from the center to the vertex is radius. When rotate = 0, a vertex is 90 * rotate on the axis of symmetry: rotate radians 91 */92 function create5star (context, sx, sy, radius, color, rotato) {93 context. save (); 94 context. fillStyle = color; 95 context. translate (sx, sy); // move the coordinate origin 96 context. rotate (Math. PI + rotato); // rotate 97 context. beginPath (); // create path 98 var x = Math. sin (0); 99 var y = Math. cos (0); 100 var dig = Math. PI/5*4; 101 for (var I = 0; I <5; I ++) {// draw the five sides of a pentagram 102 var x = Math. sin (I * dig); 103 var y = Math. cos (I * dig); 104 context. lineTo (x * radius, y * radius); 105} 106 context. closePath (); 107 context. stroke (); 108 context. fill (); 109 context. restore (); 110} 111} 112 113 </script> 114 </body> 115 
Canvas has just started learning, but it is not very understandable. I searched many examples from the Internet and combined them with my own understanding. If there are any shortcomings, I would like to ask some experts to correct them.
It is not enough to understand rotation and peaceful movement, and the canvas clearance is not very good at rotation. I hope the great god who passed by can give me some advice. Thank you very much.