Canvas of html5-code of drawing an arc and a rotating image + Rendering

Comments: Before performing the rotation operation, you must understand one sentence: rotation is the coordinate system of the canvas rather than the image itself. First, you must understand the coordinates of the circle: Center, start angle, and end angle; the next step is very simple. before performing the rotation operation, you must understand one sentence: rotation is the coordinate system of the canvas rather than the image itself. Well, after understanding this sentence, the next step is very simple.
First, let's take a look at the coordinates of the circle:
 

The Code is as follows:
<Script language = "javascript">
Var cxt = document. getElementById ('Demo'). getContext ("2d ");
Cxt. beginPath ();
Cxt. arc( 100,100, 50, Math. PI * 0.75, Math. PI * 1.75, false);/* draw a semi-circular arc with the Center Coordinate of 100,100; the start radian is 0.75, the end radian is 1.75, And the last parameter is False = clockwise, true = clockwise, of course, this parameter is optional */
Cxt. fillStyle = "# F00";/* select the color */
Cxt. fill ();/* draw the first half circle of a drawing on the canvas */
/* Draw the second half circle in the same way */
Cxt. beginPath ();
Cxt. arc (170,100, 50, Math. PI * 1.25, Math. PI * 0.25, false );
Cxt. fillStyle = "# F00 ";
Cxt. fill ();/* draw the drawing on the canvas */
Cxt. beginPath ();
/* Rotate the canvas 45 degrees clockwise. the parameter of the rotate function is radian, so conversion is required */
Cxt. rotate (45 * Math. PI/180 );
Cxt. fillRect (141.1,-50,100,100);/* Start coordinate is 141.1,-50, width and height are 100 */
Cxt. fillStyle = "# F00 ";
Cxt. fill ();
Cxt. beginPath ();
/* Rotate the canvas to a normal angle */
Cxt. rotate (-45 * Math. PI/180 );
Cxt. font = "60px ";
Cxt. strokeStyle = "# f00 ";
Cxt. strokeText ("I love html5", 0,300);/* two parameters: the first is the X axis coordinate of the text to be drawn, and the second is the Y coordinate of the text to be drawn */
Cxt. stroke ();
/* Create a gradient */
Var grd = cxt. createLinearGradient (,);/* four parameters are gradient start point x, y gradient end point x, y */
Grd. addColorStop (0, "# FF0000 ");
Grd. addColorStop (0.25, "# FFFF00 ");
Grd. addColorStop (0.5, "#00FF00 ");
Grd. addColorStop (0.75, "#00 FFFF ");
Grd. addColorStop (1, "# FFFF00 ");
Cxt. strokeStyle = grd;
Cxt. strokeText ("I love canvas", 0,400);/* two parameters: the first parameter is the X-axis coordinate of the text to be drawn, and the second parameter is the Y coordinate of the text to be drawn */
Cxt. stroke ();
</Script>

: