Comentario: Antes de hacer la operación de rotación, debe comprender una oración: la rotación es el sistema de coordenadas del lienzo en lugar de la figura misma. Primero, comprendamos las coordenadas del círculo: el centro, el ángulo de inicio, el ángulo final; el siguiente es muy simple
Antes de realizar la operación de rotación, debe comprender una oración: el sistema de coordenadas del lienzo se gira en lugar de la figura misma. De acuerdo, después de comprender esta oración, lo siguiente es muy simple.Primero, comprendamos las coordenadas del círculo:
<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, falso);/*Dibuje un arco semicircular con la coordenada central de 100,100; El Radian de inicio es 0.75, el extremo radian es 1.75, el último parámetro falso = en sentido horario, true = en sentido antihorario, por supuesto, este parámetro es opcional*/
cxt.fillstyle = "#f00";/*Seleccione el color para usar*/
cxt.fill ();/*Un paso para dibujar realmente la figura en el lienzo, dibuja el primer semicírculo*/
/*Prefiero dibujar el segundo semicírculo*/
cxt.beginpath ();
cxt.arc (170,100,50, math.pi*1.25, math.pi*0.25, falso);
cxt.fillstyle = "#f00";
cxt.fill ();/*Dibuja los gráficos dibujados en el lienzo*/
cxt.beginpath ();
/*Gire el lienzo en sentido horario en 45 grados. El parámetro de la función de rotación es radianes, por lo que debe convertirlo */
cxt.rotate (45*math.pi/180);
cxt.fillrect (141.1, -50,100,100);/*La coordenada inicial es 141.1, -50, y el ancho y la altura son 100*/
cxt.fillstyle = "#f00";
cxt.fill ();
cxt.beginpath ();
/*Gire el lienzo a un ángulo normal*/
cxt.rotate (-45*math.pi/180);
cxt.font = "60px Microsoft Yahei";
cxt.strokestyle = "#f00";
cxt.StroketeText ("Me encanta HTML5", 0,300);/*Dos parámetros, el primero es comenzar a dibujar las coordenadas del eje X del texto, y el segundo es comenzar a dibujar la coordenada y del texto*/
cxt.stroke ();
/*Crear gradiente*/
var grd = cxt.createLineArgradient (0,45,175,50);/*Los cuatro parámetros son el punto de inicio de gradiente X, y Punto final del gradiente 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.stroketeText ("I Love Canvas", 0,400);/*Dos parámetros, el primero es comenzar a dibujar las coordenadas del eje X del texto, y el segundo es comenzar a dibujar la coordenada y del texto*/
cxt.stroke ();
</script>
Imagen de reproducción: