Canvas de HTML5 - Código de exemplo gráfico + diagrama de efeito para desenhar arcos e girar

Comentário: Antes de fazer a operação de rotação, você deve entender uma frase: a rotação é o sistema de coordenadas da tela e não a própria figura. Primeiro, vamos entender as coordenadas do círculo: o centro, o ângulo inicial, o ângulo final; o próximo é muito simples

Primeiro, vamos entender as coordenadas do 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, false);/*desenhe um arco semicircular com a coordenada central de 100.100; O Radian Start é 0,75, o Radian final é 1,75, o último parâmetro false = no sentido horário, true = no sentido anti -horário, é claro, esse parâmetro é opcional*/

cxt.fillstyle = "#f00";/*Selecione a cor para usar*/

cxt.fill ();/*Uma etapa para realmente desenhar a figura na tela, desenhe o primeiro semicírculo*/

/*Prefere desenhar o segundo semicírculo*/

CXT.BEGINPATH ();

cxt.arc (170,100,50, math.pi*1,25, math.pi*0,25, false);

cxt.fillstyle = "#f00";

cxt.fill ();/*desenhe os gráficos desenhados na tela*/

CXT.BEGINPATH ();

/*Gire a tela no sentido horário em 45 graus. O parâmetro da função rotativa é os radianos, então você precisa convertê -lo */

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

cxt.fillrect (141.1, -50.100.100);/*A coordenada inicial é 141,1, -50, e a largura e a altura são 100*/

cxt.fillstyle = "#f00";

cxt.fill ();

CXT.BEGINPATH ();

/*Gire a tela para um ângulo normal*/

cxt.rotate (-45*math.pi/180);

cxt.font = "60px Microsoft yahei";

cxt.strokestyle = "#f00";

cxt.stroketext ("eu amo html5", 0.300);/*dois parâmetros, o primeiro é começar a desenhar as coordenadas do eixo x do texto, e o segundo é começar a desenhar a coordenada y do texto*/

cxt.stroke ();

/*Crie gradiente*/

var grd = cxt.createlineargradiente (0,45,175,50);/*Os quatro parâmetros são o ponto de partida do gradiente X, Y Ponto de extremidade do 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.stroketext ("eu amo tela", 0.400);/*dois parâmetros, o primeiro é começar a desenhar as coordenadas do eixo x do texto, e o segundo é começar a desenhar a coordenada y do texto*/

cxt.stroke ();

</script>

Imagem de reprodução: