Lienzo de HTML5 - Diagrama de código de ejemplo gráfico + Diagrama de efectos para dibujar arcos y girar

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

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: