html5's canvas - graphic example code + effect diagram to draw arcs and rotate

Comment: Before doing the rotation operation, you must understand one sentence: the rotation is the coordinate system of the canvas rather than the figure itself. First, let’s understand the coordinates of the circle: the center, the starting angle, the end angle; the next one is very simple

First, let’s understand the coordinates of the circle:

<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 semicircular arc with the center coordinate of 100,100; the start radian is 0.75, the end radian is 1.75, the last parameter False = clockwise, true = counterclockwise, of course, this parameter is optional*/

cxt.fillStyle="#F00";/*Select the color to use*/

cxt.fill();/*One step to really draw the figure on the canvas, draw the first semicircle*/

/*Prefer to drawing the second semicircle*/

cxt.beginPath();

cxt.arc(170,100,50,Math.PI*1.25,Math.PI*0.25,false);

cxt.fillStyle="#F00";

cxt.fill();/*Draw the drawn graphics on the canvas*/

cxt.beginPath();

/*Rotate the canvas clockwise by 45 degrees. The parameter of the rotate function is radians, so you need to convert it */

cxt.rotate(45*Math.PI/180);

cxt.fillRect(141.1,-50,100,100);/*The starting coordinate is 141.1, -50, and the 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 Microsoft Yahei";

cxt.strokeStyle="#f00";

cxt.strokeText("I love html5", 0,300);/*Two parameters, the first is to start drawing the x-axis coordinates of the text, and the second is to start drawing the Y-coordinate of the text*/

cxt.stroke();

/*Create gradient*/

var grd=cxt.createLinearGradient(0,45,175,50);/*The four parameters are the 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,"#00FFFF");

grd.addColorStop(1,"#FFFF00");

cxt.strokeStyle=grd;

cxt.strokeText("I love canvas",0,400);/*Two parameters, the first is to start drawing the x-axis coordinates of the text, and the second is to start drawing the Y-coordinate of the text*/

cxt.stroke();

</script>

Reproduction image: